{{ $delimiter_left -}} +{{ .Inner | safeHTML -}} +{{ $delimiter_right -}}
{{ "" -}} diff --git a/layouts/_default/_markup/render-codeblock-math.html b/layouts/_default/_markup/render-codeblock-math.html index 831b9a2f6b..8a171b0d91 100644 --- a/layouts/_default/_markup/render-codeblock-math.html +++ b/layouts/_default/_markup/render-codeblock-math.html @@ -1,16 +1,18 @@ -{{/* set default delimiters */}} -{{ $delimiter_left := "$$" }} -{{ $delimiter_right := "$$" }} +{{ .Page.Store.Set "hasKaTeX" true -}} -{{/* override delimiters if set in config file */}} -{{ with $.Page.Site.Params.katex.options.delimiters }} - {{ range first 1 ( where . "display" true ) }} - {{ $delimiter_left = index . "left" }} - {{ $delimiter_right = index . "right" }} - {{ end }} -{{end}} +{{/* set default delimiters */ -}} +{{ $delimiter_left := "$$" -}} +{{ $delimiter_right := "$$" -}} + +{{/* override delimiters if set in config file */ -}} +{{ with $.Page.Site.Params.katex.options.delimiters -}} + {{ range first 1 ( where . "display" true ) -}} + {{ $delimiter_left = index . "left" -}} + {{ $delimiter_right = index . "right" -}} + {{ end -}} +{{ end -}} {{/* output of equation */}} -{{ $delimiter_left }} -{{ .Inner | safeHTML }} -{{ $delimiter_right }}
+{{ $delimiter_left -}} +{{ .Inner | safeHTML -}} +{{ $delimiter_right }}
{{ "" -}} \ No newline at end of file diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index a4a9cc028e..01f716dab8 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,7 +1,15 @@ +{{ $needKaTeX := or .Site.Params.katex.enable .Params.math .Params.chem -}} +{{ $needmhchem := or .Site.Params.katex.mhchem.enable .Params.chem -}} {{ $needmermaid := .Site.Params.mermaid.enable -}} {{ if ge hugo.Version "0.93.0" -}} - {{ $needmermaid = or $needmermaid (.Page.Store.Get "hasmermaid") -}} -{{ end }} + {{ $needKaTeX = or $needKaTeX (.Page.Store.Get "hasKaTeX") -}} + {{ $needmhchem = or $needmhchem (.Page.Store.Get "hasmhchem") -}} + {{ $needmermaid = or $needmermaid (.Page.Store.Get "hasmermaid") -}} +{{ else -}} + {{ if or $needKaTeX $needmhchem $needmermaid -}} + {{ warnf "Outdated Hugo version %s, consider upgrading to make full use of all theme features" hugo.Version }} + {{ end -}} +{{ end -}} {{ if $needmermaid -}} @@ -32,25 +40,27 @@ {{ end -}} -{{ if .Site.Params.katex.enable -}} - - - - - -{{ if .Site.Params.katex.mhchem.enable -}} - - -{{ end -}} - - +{{ if $needKaTeX -}} +{{/* load stylesheet and scripts for KaTeX support */ -}} + + {{/* The loading of KaTeX is deferred to speed up page rendering */ -}} + + {{ if $needmhchem -}} + {{/* To add support for displaying chemical equations and physical units, load the mhchem extension: */ -}} + + {{ end -}} + {{/* To automatically render math in text elements, include the auto-render extension: */ -}} + {{ end -}} {{ $jsBs := resources.Get "vendor/bootstrap/dist/js/bootstrap.bundle.js" -}} diff --git a/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md b/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md index db9ee56220..1c4b62bb59 100644 --- a/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md +++ b/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md @@ -3,6 +3,8 @@ title: "Diagrams and Formulae" linkTitle: "Diagrams and Formulae" weight: 11 description: Add generated diagrams and scientific formulae to your site. +math: true +chem: true --- Docsy has built-in support for a number of diagram creation and typesetting tools you can use to add rich content to your site, including \\(\KaTeX\\), Mermaid, Diagrams.net, PlantUML, and MarkMap. @@ -11,51 +13,84 @@ Docsy has built-in support for a number of diagram creation and typesetting tool [\\(\LaTeX\\)](https://www.latex-project.org/) is a high-quality typesetting system for the production of technical and scientific documentation. Due to its excellent math typesetting capabilities, \\(\TeX\\) became the de facto standard for the communication and publication of scientific documents, especially if these documents contain a lot of mathematical formulae. Designed and mostly written by Donald Knuth, the initial version was released in 1978. Dating back that far, \\(\LaTeX\\) has `pdf` as its primary output target and is not particularly well suited for producing HTML output for the Web. Fortunately, with [\\(\KaTeX\\)](https://katex.org/) there exists a fast and easy-to-use JavaScript library for \\(\TeX\\) math rendering on the web, which was integrated into the Docsy theme. -With \\(\KaTeX\\) support enabled in Docsy, you can include complex mathematical formulae into your web page, either inline or centred on its own line. Since \\(\KaTeX\\) relies on server side rendering, it produces the same output regardless of your browser or your environment. Formulae can be shown either inline or in display mode: +With \\(\KaTeX\\) support [enabled](#activating-and-configuring-katex-support) in Docsy, you can include complex mathematical formulae into your web page, either inline or centred on its own line. Since \\(\KaTeX\\) relies on server side rendering, it produces the same output regardless of your browser or your environment. Formulae can be shown either inline or in display mode: ### Inline formulae The following code sample produces a text line with three inline formulae: ```tex -When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c= 0\\) and they are \\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\\) +When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c= 0\\) and they are \\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\\). ``` -When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c= 0\\) and they are \\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\\) +When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c= 0\\) and they are \\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\\). ### Formulae in display mode -The following code sample produces an introductory text line followed by a formula numbered as `(1)` residing on her own line: +The following code sample produces an introductory text line followed by a formula numbered as `(1)` residing on its own line: -```tex +````markdown The probability of getting \\(k\\) heads when flipping \\(n\\) coins is: -$$ +```math \tag*{(1)} P(E) = {n \choose k} p^k (1-p)^{n-k} -$$ ``` +```` + +The formula itself is written inside a [GLFM math block](https://docs.gitlab.com/ee/user/markdown.html#math). The above code fragment renders to: The probability of getting \\(k\\) heads when flipping \\(n\\) coins is: -$$ +```math \tag*{(1)} P(E) = {n \choose k} p^k (1-p)^{n-k} -$$ +``` -You can also use [GLFM's math blocks](https://docs.gitlab.com/ee/user/markdown.html#math) (requires hugo 0.93 or newer): -````markdown -```math +{{% alert title="Warning" color="warning" %}} +`math` code blocks are only supported as of hugo version 0.93. + +In case of hugo version 0.92 or lower, use this code snippet to display the formula: +```tex +$$ \tag*{(1)} P(E) = {n \choose k} p^k (1-p)^{n-k} +$$ ``` -```` +{{% /alert %}} {{% alert title="Tip" %}} This [wiki page](https://en.wikibooks.org/wiki/LaTeX/Mathematics) provides in-depth information about typesetting mathematical formulae using the \\(\LaTeX\\) typesetting system. {{% /alert %}} -### Enabling and configuring \\(\LaTeX\\) support +### Activating and configuring \\(\KaTeX\\) support + +#### Auto activation + +As soon as you use a `math` code block on your page, support of \\(\KaTeX\\) is automatically enabled. + +#### Manual activation (no `math` code block present or hugo 0.92 or lower) -To enable/disable \\(\KaTeX\\) support inside the Docsy theme, update `config.toml`/`config.yaml`/`config.json`: +If you want to use inline formulae and don't have a `math` code block present in your page which triggers auto activation, you need to manually activate \\(\KaTeX\\) support. The easiest way to do so is to add a `math` attribute to the frontmatter of your page and set it to `true`: {{< tabpane persistLang=false >}} -{{< tab header="Configuration file:" disabled=true />}} +{{< tab header="Page front matter:" disabled=true />}} +{{< tab header="toml" lang="toml" >}} ++++ +math = true ++++ +{{< /tab >}} +{{< tab header="yaml" lang="yaml" >}} +--- +math: true +--- +{{< /tab >}} +{{< tab header="json" lang="json" >}} +{ + "math": true +} +{{< /tab >}} +{{< /tabpane >}} + +If you use formulae in most of your pages, you can also enable sitewide \\(\KaTeX\\) support inside the Docsy theme. To do so update `config.toml`/`config.yaml`/`config.json`: + +{{< tabpane persistLang=false >}} +{{< tab header="Site configuration file:" disabled=true />}} {{< tab header="config.toml" lang="toml" >}} [params.katex] enable = true @@ -79,7 +114,7 @@ params: Additionally, you can customize various \\(\KaTeX\\) options inside `config.toml`/`config.yaml`/`config.json`, if needed: {{< tabpane persistLang=false >}} -{{< tab header="Configuration file:" disabled=true />}} +{{< tab header="Site configuration file:" disabled=true />}} {{< tab header="config.toml" lang="toml" >}} [params.katex] # enable/disable KaTeX support @@ -192,10 +227,86 @@ For a complete list of options and their detailed description, have a look at th ### Display of Chemical Equations and Physical Units -[mhchem](https://www.ctan.org/pkg/mhchem) is a \\(\LaTeX\\) package for typesetting chemical molecular formulae and equations. Fortunately, \\(\KaTeX\\) provides the `mhchem` [extension](https://github.com/KaTeX/KaTeX/tree/main/contrib/mhchem) that makes the `mhchem` package accessible when authoring content for the web. Since this extension was integrated into the Docsy theme, you can write beautiful chemical equations easily once `mhchem` support is enabled inside your `config.toml`/`config.yaml`/`config.json`: +[mhchem](https://www.ctan.org/pkg/mhchem) is a \\(\LaTeX\\) package for typesetting chemical molecular formulae and equations. Fortunately, \\(\KaTeX\\) provides the `mhchem` [extension](https://github.com/KaTeX/KaTeX/tree/main/contrib/mhchem) that makes the `mhchem` package accessible when authoring content for the web. With `mhchem` extension [enabled](#activating-rendering-support-for-chemical-formulae), you can easily include chemical equations into your page. An equation can be shown either inline or can reside on its own line. The following code sample produces a text line including a chemical equation: + +```mhchem +*Precipitation of barium sulfate:* \\(\ce{SO4^2- + Ba^2+ -> BaSO4 v}\\) +``` + +*Precipitation of barium sulfate:* \\(\ce{SO4^2- + Ba^2+ -> BaSO4 v}\\) + +More complex equations need to be displayed on their own line. Use a code block adorned with `chem` in order to achieve this: + +````markdown +```chem +\tag*{(2)} \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteric hydroxide}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{tetrahydroxozincate}}{\ce{[Zn(OH)4]^2-}}$} +``` +```` + +```chem +\tag*{(2)} \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteric hydroxide}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{tetrahydroxozincate}}{\ce{[Zn(OH)4]^2-}}$} +``` + +{{% alert title="Warning" color="warning" %}} +`chem` code blocks are only supported as of hugo version 0.93. + +In case of hugo version 0.92 or lower, use this code snippet to display the formula: +```tex +$$ +\tag*{(2)} \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteric hydroxide}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{tetrahydroxozincate}}{\ce{[Zn(OH)4]^2-}}$} +$$ +``` +{{% /alert %}} + +{{% alert title="Note" %}} +The [manual](https://mhchem.github.io/MathJax-mhchem/) for mchem’s input syntax provides in-depth information about typesetting chemical formulae and physical units using the `mhchem` tool. +{{% /alert %}} + +Use of `mhchem` is not limited to the authoring of chemical equations, using the included `\pu` command, pretty looking physical units can be written with ease, too. The following code sample produces two text lines with four numbers plus their corresponding physical units: + +```mhchem +* Scientific number notation: \\(\pu{1.2e3 kJ}\\) or \\(\pu{1.2E3 kJ}\\) \\ +* Divisions: \\(\pu{123 kJ/mol}\\) or \\(\pu{123 kJ//mol}\\) +``` + +* Scientific number notation: \\(\pu{1.2e3 kJ}\\) or \\(\pu{1.2E3 kJ}\\) +* Divisions: \\(\pu{123 kJ/mol}\\) or \\(\pu{123 kJ//mol}\\) + +For a complete list of options when authoring physical units, have a look at the [section](https://mhchem.github.io/MathJax-mhchem/#pu) on physical units in the `mhchem` documentation. + +#### Activating rendering support for chemical formulae + +##### Auto activation + +As soon as you use a `chem` code block on your page, rendering support for chemical equations is automatically enabled. + +##### Manual activation (no `chem` code block present or hugo 0.92 or lower) + +If you want to use chemical formulae inline and don't have a `chem` code block present in your page which triggers auto activation, you need to manually activate rendering support for chemical formulae. The easiest way to do so is to add a `chem` attribute to the frontmatter of your page and set it to `true`: {{< tabpane persistLang=false >}} -{{< tab header="Configuration file:" disabled=true />}} +{{< tab header="Page front matter:" disabled=true />}} +{{< tab header="toml" lang="toml" >}} ++++ +chem = true ++++ +{{< /tab >}} +{{< tab header="yaml" lang="yaml" >}} +--- +chem: true +--- +{{< /tab >}} +{{< tab header="json" lang="json" >}} +{ + "chem": true +} +{{< /tab >}} +{{< /tabpane >}} + +If you use formulae in most of your pages, you can also enable sitewide rendering support for chemical formulae inside the Docsy theme. To do so, enable `mhchem` inside your `config.toml`/`config.yaml`/`config.json`: + +{{< tabpane persistLang=false >}} +{{< tab header="Site configuration file:" disabled=true />}} {{< tab header="config.toml" lang="toml" >}} [params.katex] enable = true @@ -224,39 +335,6 @@ params: {{< /tab >}} {{< /tabpane >}} - -With `mhchem` extension enabled, you can easily include chemical equations into your page. The equations can be shown either inline or can reside on its own line. The following code sample produces a text line including a chemical equation: - -```mhchem -*Precipitation of barium sulfate:* \\(\ce{SO4^2- + Ba^2+ -> BaSO4 v}\\) -``` - -*Precipitation of barium sulfate:* \\(\ce{SO4^2- + Ba^2+ -> BaSO4 v}\\) - -More complex equations, like the one shown in the code sample below, should be displayed on their own line: - -```mhchem -$$\tag*{(2)} \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteric hydroxide}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{tetrahydroxozincate}}{\ce{[Zn(OH)4]^2-}}$}$$ -``` - -$$\tag*{(2)} \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteric hydroxide}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{tetrahydroxozincate}}{\ce{[Zn(OH)4]^2-}}$}$$ - -{{% alert title="Tip" %}} -The [manual](https://mhchem.github.io/MathJax-mhchem/) for mchem’s input syntax provides in-depth information about typesetting chemical formulae and physical units using the `mhchem` tool. -{{% /alert %}} - -Use of `mhchem` is not limited to the authoring of chemical equations, using the included `\pu` command, pretty looking physical units can be written with ease, too. The following code sample produces two text lines with four numbers plus their corresponding physical units: - -```mhchem -* Scientific number notation: \\(\pu{1.2e3 kJ}\\) or \\(\pu{1.2E3 kJ}\\) \\ -* Divisions: \\(\pu{123 kJ/mol}\\) or \\(\pu{123 kJ//mol}\\) -``` - -* Scientific number notation: \\(\pu{1.2e3 kJ}\\) or \\(\pu{1.2E3 kJ}\\) -* Divisions: \\(\pu{123 kJ/mol}\\) or \\(\pu{123 kJ//mol}\\) - -For a complete list of options when authoring physical units, have a look at the [section](https://mhchem.github.io/MathJax-mhchem/#pu) on physical units in the `mhchem` documentation. - ## Diagrams with Mermaid [Mermaid](https://mermaid-js.github.io) is a Javascript library for rendering simple text definitions to useful diagrams in the browser. It can generate a variety of different diagram types, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, user journey diagrams, Gantt charts and pie charts.