mirror of
https://github.com/tiennm99/hugoDocs.git
synced 2026-10-18 18:15:22 +00:00
content: Replace calls to the code shortcode with fenced code blocks
This commit is contained in:
1 parent
b23c9a583a
commit
fd628be6ed
110 files changed
+483
-555
No files matched your search
@@ -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 `+` or `-`, 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:
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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" %}}
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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" %}}
|
||||
Reference in new issue
Block a user