content: Replace calls to the code shortcode with fenced code blocks

This commit is contained in:
Joe Mooring authored and GitHub committed 2025-03-06 02:49:11 -08:00
1 parent b23c9a583a
commit fd628be6ed
110 files changed
+483 -555

No files matched your search

+10 -10
View File
@@ -58,15 +58,15 @@ In its default configuration, Hugo renders Markdown blockquotes according to the
[CommonMark specification]: https://spec.commonmark.org/current/
{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-blockquote.html" copy=true}
<blockquote>
{{ .Text }}
</blockquote>
{{< /code >}}
```
To render a blockquote as an HTML `figure` element with an optional citation and caption:
{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-blockquote.html" copy=true}
<figure>
<blockquote {{ with .Attributes.cite }}cite="{{ . }}"{{ end }}>
{{ .Text }}
@@ -77,7 +77,7 @@ To render a blockquote as an HTML `figure` element with an optional citation and
</figcaption>
{{ end }}
</figure>
{{< /code >}}
```
Then in your markdown:
@@ -94,7 +94,7 @@ Also known as _callouts_ or _admonitions_, alerts are blockquotes used to emphas
With the basic Markdown syntax, the first line of each alert is an alert designator consisting of an exclamation point followed by the alert type, wrapped within brackets. For example:
{{< code file=content/example.md lang=text >}}
```text {file="content/example.md"}
> [!NOTE]
> Useful information that users should know, even when skimming content.
@@ -109,7 +109,7 @@ With the basic Markdown syntax, the first line of each alert is an alert designa
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
{{< /code >}}
```
The basic syntax is compatible with [GitHub], [Obsidian], and [Typora].
@@ -121,10 +121,10 @@ The basic syntax is compatible with [GitHub], [Obsidian], and [Typora].
With the extended Markdown syntax, you may optionally include an alert sign and/or an alert title. The alert sign is one of&nbsp;`+`&nbsp;or&nbsp;`-`, typically used to indicate whether an alert is graphically foldable. For example:
{{< code file=content/example.md lang=text >}}
```text {file="content/example.md"}
> [!WARNING]+ Radiation hazard
> Do not approach or handle without protective gear.
{{< /code >}}
```
The extended syntax is compatible with [Obsidian].
@@ -136,7 +136,7 @@ The extended syntax is not compatible with GitHub or Typora. If you include an a
This blockquote render hook renders a multilingual alert if an alert designator is present, otherwise it renders a blockquote according to the CommonMark specification.
{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-blockquote.html" copy=true}
{{ $emojis := dict
"caution" ":exclamation:"
"important" ":information_source:"
@@ -162,7 +162,7 @@ This blockquote render hook renders a multilingual alert if an alert designator
{{ .Text }}
</blockquote>
{{ end }}
{{< /code >}}
```
To override the label, create these entries in your i18n files:
+8 -8
View File
@@ -10,13 +10,13 @@ keywords: []
This Markdown example contains a fenced code block:
{{< code file=content/example.md lang=text >}}
````text {file="content/example.md"}
```bash {class="my-class" id="my-codeblock" lineNos=inline tabWidth=2}
declare a=1
echo "$a"
exit
```
{{< /code >}}
````
A fenced code block consists of:
@@ -83,10 +83,10 @@ In its default configuration, Hugo renders fenced code blocks by passing the cod
[CommonMark specification]: https://spec.commonmark.org/current/
{{< code file=layouts/_default/_markup/render-codeblock.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-codeblock.html" copy=true}
{{ $result := transform.HighlightCodeBlock . }}
{{ $result.Wrapped }}
{{< /code >}}
```
Although you can use one template with conditional logic to control the behavior on a per-language basis, you can also create language-specific templates.
@@ -103,23 +103,23 @@ For example, to create a code block render hook to render [Mermaid] diagrams:
[Mermaid]: https://mermaid.js.org/
{{< code file=layouts/_default/_markup/render-codeblock-mermaid.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-codeblock-mermaid.html" copy=true}
<pre class="mermaid">
{{- .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
{{< /code >}}
```
Then include this snippet at the bottom of the your base template:
{{< code file=layouts/_default/baseof.html copy=true >}}
```go-html-template {file="layouts/_default/baseof.html" copy=true}
{{ if .Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}
{{< /code >}}
```
See the [diagrams] page for details.
+4 -4
View File
@@ -46,19 +46,19 @@ In its default configuration, Hugo renders Markdown headings according to the [C
[CommonMark specification]: https://spec.commonmark.org/current/
{{< code file=layouts/_default/_markup/render-heading.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-heading.html" copy=true}
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
{{- .Text -}}
</h{{ .Level }}>
{{< /code >}}
```
To add an anchor link to the right of each heading:
{{< code file=layouts/_default/_markup/render-heading.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-heading.html" copy=true}
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
{{ .Text }}
<a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>
{{< /code >}}
```
{{% include "/_common/render-hooks/pageinner.md" %}}
+4 -4
View File
@@ -70,17 +70,17 @@ In its default configuration, Hugo renders Markdown images according to the [Com
[CommonMark specification]: https://spec.commonmark.org/current/
{{< code file=layouts/_default/_markup/render-image.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-image.html" copy=true}
<img src="{{ .Destination | safeURL }}"
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- /* chomp trailing newline */ -}}
{{< /code >}}
```
To render standalone images within `figure` elements:
{{< code file=layouts/_default/_markup/render-image.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-image.html" copy=true}
{{- if .IsBlock -}}
<figure>
<img src="{{ .Destination | safeURL }}"
@@ -94,7 +94,7 @@ To render standalone images within `figure` elements:
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- end -}}
{{< /code >}}
```
Note that the above requires the following site configuration:
+4 -4
View File
@@ -53,18 +53,18 @@ In its default configuration, Hugo renders Markdown links according to the [Comm
[CommonMark specification]: https://spec.commonmark.org/current/
{{< code file=layouts/_default/_markup/render-link.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-link.html" copy=true}
<a href="{{ .Destination | safeURL }}"
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- with .Text }}{{ . }}{{ end -}}
</a>
{{- /* chomp trailing newline */ -}}
{{< /code >}}
```
To include a `rel` attribute set to `external` for external links:
{{< code file=layouts/_default/_markup/render-link.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-link.html" copy=true}
{{- $u := urls.Parse .Destination -}}
<a href="{{ .Destination | safeURL }}"
{{- with .Title }} title="{{ . }}"{{ end -}}
@@ -73,7 +73,7 @@ To include a `rel` attribute set to `external` for external links:
{{- with .Text }}{{ . }}{{ end -}}
</a>
{{- /* chomp trailing newline */ -}}
{{< /code >}}
```
## Default
+6 -6
View File
@@ -17,7 +17,7 @@ Hugo uses [Goldmark] to render Markdown to HTML. Goldmark supports custom extens
Depending on your choice of delimiters, Hugo will classify a passthrough element as either _block_ or _inline_. Consider this contrived example:
{{< code file=content/sample.md >}}
```text {file="content/example.md"}
This is a
\[block\]
@@ -25,7 +25,7 @@ This is a
passthrough element with opening and closing block delimiters.
This is an \(inline\) passthrough element with opening and closing inline delimiters.
{{< /code >}}
```
Update your site configuration to enable the Passthrough extension and define opening and closing delimiters for each passthrough element type, either `block` or `inline`. For example:
@@ -86,7 +86,7 @@ Instead of client-side JavaScript rendering of mathematical markup using MathJax
[`transform.ToMath`]: /functions/transform/tomath/
{{< code file=layouts/_default/_markup/render-passthrough.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-passthrough.html" copy=true}
{{- $opts := dict "output" "htmlAndMathml" "displayMode" (eq .Type "block") }}
{{- with try (transform.ToMath .Inner $opts) }}
{{- with .Err }}
@@ -96,18 +96,18 @@ Instead of client-side JavaScript rendering of mathematical markup using MathJax
{{- $.Page.Store.Set "hasMath" true }}
{{- end }}
{{- end -}}
{{< /code >}}
```
Then, in your base template, conditionally include the KaTeX CSS within the head element:
{{< code file=layouts/_default/baseof.html copy=true >}}
```go-html-template {file="layouts/_default/baseof.html" copy=true}
<head>
{{ $noop := .WordCount }}
{{ if .Page.Store.Get "hasMath" }}
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" rel="stylesheet">
{{ end }}
</head>
{{< /code >}}
```
In the above, note the use of a [noop](g) statement to force content rendering before we check the value of `hasMath` with the `Store.Get` method.
+2 -2
View File
@@ -57,7 +57,7 @@ In its default configuration, Hugo renders Markdown tables according to the [Git
[GitHub Flavored Markdown specification]: https://github.github.com/gfm/#tables-extension-
{{< code file=layouts/_default/_markup/render-table.html copy=true >}}
```go-html-template {file="layouts/_default/_markup/render-table.html" copy=true}
<table
{{- range $k, $v := .Attributes }}
{{- if $v }}
@@ -95,6 +95,6 @@ In its default configuration, Hugo renders Markdown tables according to the [Git
{{- end }}
</tbody>
</table>
{{< /code >}}
```
{{% include "/_common/render-hooks/pageinner.md" %}}