mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-13 13:03:13 +00:00
37 lines
1.7 KiB
HTML
37 lines
1.7 KiB
HTML
<!--
|
|
Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/example.html
|
|
|
|
Display a code example and render a preview of the same input. The shortcode accepts the languages supported by
|
|
Hugo's highlight function. The shortcode supports the following named arguments:
|
|
|
|
"id" Optional identifier of the element's container.
|
|
"lang" Language used to display the code, default value is "markdown".
|
|
"show_markup" If the markup should be output in the HTML, defaults to "true".
|
|
"show_preview" If the preview should be output in the HTML, defaults to "true".
|
|
"class" Optional class attributes of the element's container.
|
|
-->
|
|
|
|
{{- $id := .Get "id" | default "" -}}
|
|
{{- $class := .Get "class" | default "" -}}
|
|
{{- $lang := .Get "lang" | default "markdown" -}}
|
|
{{- $show_markup := .Get "show_markup" | default true -}}
|
|
{{- $show_preview := .Get "show_preview" | default true -}}
|
|
{{- $content := .InnerDeindent -}}
|
|
{{- if eq $lang "hugo" }}{{ $lang = "markdown" }}{{ end -}}
|
|
|
|
<div class="rounded border mb-3">
|
|
{{- if eq $show_preview true -}}
|
|
<div {{ with $id }}id="{{ . }}"{{ end }} class="rounded-top p-3 {{ with $class }} {{ . }}{{ end }}">
|
|
{{- $content | .Page.RenderString -}}
|
|
</div>
|
|
{{- end -}}
|
|
{{- if eq $show_markup true -}}
|
|
<div class="d-flex align-items-center ps-3 pe-3 py-1{{ if $show_preview }} border-top{{ else }} rounded-top{{ end }} border-bottom syntax-highlight">
|
|
<small class="font-monospace text-body text-uppercase">{{- $lang -}}</small>
|
|
</div>
|
|
<div class="rounded-bottom syntax-highlight border-none">
|
|
{{- highlight (trim $content "\r\n") $lang "" -}}
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|