Code and commands: a block with copy button, optional heading (file name), line numbers, wrapping and a maximum height, highlighted for shell, PowerShell, yaml, json, js/ts, ini, html, Ruby and Go; or inline in running text. The code comes from code or the text content; common indentation is removed, so it can be written indented in HTML.
With follow and max-height it suits live logs: appended lines scroll into view while the block is scrolled to the end; scroll up and the position stays, with a button to jump back to the latest line.
Examples
Commands and config files
A code block with copy button, highlighted for shell, powershell, yaml, json, js/ts, ini, html, ruby and go. The code is the text content; common indentation is removed, so it can be indented with the HTML. heading shows a title such as a file name.
# Reboot via the RPC API
curl -X POST "http://${IP:-192.168.1.21}/rpc/Shelly.Reboot" \
-d '{"delay_ms": 500}'
{
"wifi": { "sta_ip": "192.168.1.21", "rssi": -63 },
"sys": { "uptime": 356420, "ram_free": 98764 },
"cloud": { "connected": false }
}
<div style="display:grid;gap:16px">
<kern-code language="shell" heading="Reboot a device">
# Reboot via the RPC API
curl -X POST "http://${IP:-192.168.1.21}/rpc/Shelly.Reboot" \
-d '{"delay_ms": 500}'
</kern-code>
<kern-code language="json" heading="Shelly.GetStatus (excerpt)">
{
"wifi": { "sta_ip": "192.168.1.21", "rssi": -63 },
"sys": { "uptime": 356420, "ram_free": 98764 },
"cloud": { "connected": false }
}
</kern-code>
</div>
Line numbers and height
line-numbers numbers the lines and max-height scrolls longer code. wrap wraps long lines instead of scrolling sideways.
inline puts code into running text, without the copy button; language still highlights it.
The config lives in /config/configuration.yaml;
apply it with ha core restart.
<p>
The config lives in <kern-code inline>/config/configuration.yaml</kern-code>;
apply it with <kern-code inline language="shell">ha core restart</kern-code>.
</p>
Live log
follow keeps a growing log at its latest line: set code with the new lines, and while the block is scrolled to the end it scrolls along. Scroll up to read, and the position stays; «Jump to latest» brings you back. Use it with max-height, so the log scrolls instead of the page. scrollToEnd() jumps to the end from script.
language="powershell" (or ps1, pwsh) highlights cmdlets such as Get-ChildItem, $variables, operators like -eq and here-strings. ruby (rb) knows symbols, @instance variables and heredocs, go (golang) raw strings, runes and the predeclared types and functions.
<# Turn a Shelly relay off and on again, e.g. to restart a frozen access point #>
param([string]$Ip = $env:SHELLY_IP, [int]$Delay = 5)
$status = Invoke-RestMethod -Uri "http://$Ip/rpc/Switch.GetStatus?id=0" -TimeoutSec 3
if ($status.output -eq $true) {
$body = @"
{"id": 0, "on": false, "toggle_after": $Delay}
"@
Invoke-RestMethod -Method Post -Uri "http://$Ip/rpc/Switch.Set" -Body $body -ContentType 'application/json'
Write-Host "Relay off, back on in $Delay s" -ForegroundColor Yellow
}
require 'net/http'
require 'json'
DEVICES = { kitchen: '192.168.1.34', bathroom_fan: '192.168.1.21' }.freeze
DEVICES.each do |name, ip|
res = Net::HTTP.get(URI("http://#{ip}/rpc/Switch.GetStatus?id=0"))
watts = JSON.parse(res, symbolize_names: true)[:apower]
puts format('%-14s %6.1f W', name, watts)
rescue Errno::EHOSTUNREACH, Net::OpenTimeout
warn "#{name}: offline"
end
// Status reads the relay state of a Shelly Gen2 device.
func Status(ctx context.Context, ip string) (bool, error) {
ctx, cancel := context.WithTimeout(ctx, 3*time.Second)
defer cancel()
req, err := http.NewRequestWithContext(ctx, http.MethodGet, "http://"+ip+"/rpc/Switch.GetStatus?id=0", nil)
if err != nil {
return false, err
}
res, err := http.DefaultClient.Do(req)
if err != nil {
return false, fmt.Errorf("shelly %s: %w", ip, err)
}
defer res.Body.Close()
var s struct {
Output bool `json:"output"`
Power float64 `json:"apower"`
}
if err := json.NewDecoder(res.Body).Decode(&s); err != nil {
return false, err
}
return s.Output, nil
}
<div style="display:grid;gap:16px">
<kern-code language="powershell" heading="Restart-Shelly.ps1" line-numbers>
<# Turn a Shelly relay off and on again, e.g. to restart a frozen access point #>
param([string]$Ip = $env:SHELLY_IP, [int]$Delay = 5)
$status = Invoke-RestMethod -Uri "http://$Ip/rpc/Switch.GetStatus?id=0" -TimeoutSec 3
if ($status.output -eq $true) {
$body = @"
{"id": 0, "on": false, "toggle_after": $Delay}
"@
Invoke-RestMethod -Method Post -Uri "http://$Ip/rpc/Switch.Set" -Body $body -ContentType 'application/json'
Write-Host "Relay off, back on in $Delay s" -ForegroundColor Yellow
}
</kern-code>
<kern-code language="ruby" heading="power_report.rb">
require 'net/http'
require 'json'
DEVICES = { kitchen: '192.168.1.34', bathroom_fan: '192.168.1.21' }.freeze
DEVICES.each do |name, ip|
res = Net::HTTP.get(URI("http://#{ip}/rpc/Switch.GetStatus?id=0"))
watts = JSON.parse(res, symbolize_names: true)[:apower]
puts format('%-14s %6.1f W', name, watts)
rescue Errno::EHOSTUNREACH, Net::OpenTimeout
warn "#{name}: offline"
end
</kern-code>
<kern-code language="go" heading="shelly.go">
// Status reads the relay state of a Shelly Gen2 device.
func Status(ctx context.Context, ip string) (bool, error) {
ctx, cancel := context.WithTimeout(ctx, 3*time.Second)
defer cancel()
req, err := http.NewRequestWithContext(ctx, http.MethodGet, "http://"+ip+"/rpc/Switch.GetStatus?id=0", nil)
if err != nil {
return false, err
}
res, err := http.DefaultClient.Do(req)
if err != nil {
return false, fmt.Errorf("shelly %s: %w", ip, err)
}
defer res.Body.Close()
var s struct {
Output bool `json:"output"`
Power float64 `json:"apower"`
}
if err := json.NewDecoder(res.Body).Decode(&s); err != nil {
return false, err
}
return s.Output, nil
}
</kern-code>
</div>
Properties
code
string | undefined
The code; defaults to the text content.
followdefault false
boolean
Follow new lines, for live logs with max-height: when the code changes while the block is scrolled to the end, it scrolls to the new end. Scrolled up, the position stays and a button jumps to the latest line.
heading
string | undefined
Title above the block, e.g. a file name.
inlinereflectsdefault false
boolean
In running text, without copy button.
labelCopiedattribute label-copied · default Copied · de Kopiert
string | undefined
labelCopyattribute label-copy · default Copy · de Kopieren
string | undefined
labelLatestattribute label-latest · default Jump to latest · de Zum Neuesten