code highlighter: avoid unstyled blocks in docs #32

The new highlighter does not work to well if no syntax is specified
for the code block / code fence / indention.
See https://github.com/gohugoio/hugo/pull/8917
This commit is contained in:
Sören Weber 2021-08-23 23:32:34 +02:00
parent 32d3d80b80
commit 42c8ec549b
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
12 changed files with 72 additions and 67 deletions

View file

@ -9,7 +9,7 @@ The following steps are here to help you initialize your new website. If you don
Hugo provides a `new` command to create a new website. Hugo provides a `new` command to create a new website.
``` ```shell
hugo new site <new_project> hugo new site <new_project>
``` ```
@ -38,7 +38,7 @@ home = [ "HTML", "RSS", "JSON"]
Chapters are pages that contain other child pages. It has a special layout style and usually just contains a _chapter name_, the _title_ and a _brief abstract_ of the section. Chapters are pages that contain other child pages. It has a special layout style and usually just contains a _chapter name_, the _title_ and a _brief abstract_ of the section.
``` ```markdown
### Chapter 1 ### Chapter 1
# Basics # Basics
@ -52,7 +52,7 @@ renders as
**Hugo-theme-relearn** provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command **Hugo-theme-relearn** provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command
``` ```shell
hugo new --kind chapter basics/_index.md hugo new --kind chapter basics/_index.md
``` ```
@ -64,7 +64,7 @@ By default all chapters and pages are created as a draft. If you want to render
Then, create content pages inside the previously created chapter. Here are two ways to create content in the chapter: Then, create content pages inside the previously created chapter. Here are two ways to create content in the chapter:
``` ```shell
hugo new basics/first-content.md hugo new basics/first-content.md
hugo new basics/second-content/_index.md hugo new basics/second-content/_index.md
``` ```
@ -75,7 +75,7 @@ Feel free to edit thoses files by adding some sample content and replacing the `
Launch by using the following command: Launch by using the following command:
``` ```shell
hugo serve hugo serve
``` ```
@ -91,7 +91,7 @@ You should notice three things:
When your site is ready to deploy, run the following command: When your site is ready to deploy, run the following command:
``` ```shell
hugo hugo
``` ```

View file

@ -11,13 +11,13 @@ It is pre-configured skeleton pages with default front matter. Please refer to t
To create a Chapter page, run the following commands To create a Chapter page, run the following commands
``` ```shell
hugo new --kind chapter <name>/_index.md hugo new --kind chapter <name>/_index.md
``` ```
It will create a page with predefined Front-Matter: It will create a page with predefined Front-Matter:
```markdown ```toml
+++ +++
title = "{{ replace .Name "-" " " | title }}" title = "{{ replace .Name "-" " " | title }}"
date = {{ .Date }} date = {{ .Date }}
@ -35,18 +35,21 @@ Lorem Ipsum.
## Default ## Default
To create a default page, run either one of the following commands To create a default page, run either one of the following commands either
``` ```shell
# Either
hugo new <chapter>/<name>/_index.md hugo new <chapter>/<name>/_index.md
# Or ```
or
```shell
hugo new <chapter>/<name>.md hugo new <chapter>/<name>.md
``` ```
It will create a page with predefined Front-Matter: It will create a page with predefined Front-Matter:
```markdown ```toml
+++ +++
title = "{{ replace .Name "-" " " | title }}" title = "{{ replace .Name "-" " " | title }}"
date = {{ .Date }} date = {{ .Date }}

View file

@ -13,7 +13,7 @@ Once on the Font Awesome page for a specific icon, for example the page for the
The HTML to include the heart icon is: The HTML to include the heart icon is:
``` ```html
<i class="fas fa-heart"></i> <i class="fas fa-heart"></i>
``` ```
@ -21,7 +21,7 @@ The HTML to include the heart icon is:
Paste the `<i>` HTML into markup and Font Awesome will load the relevant icon. Paste the `<i>` HTML into markup and Font Awesome will load the relevant icon.
``` ```html
Built with <i class="fas fa-heart"></i> by Relearn and Hugo Built with <i class="fas fa-heart"></i> by Relearn and Hugo
``` ```

View file

@ -403,9 +403,11 @@ HTML:
Use "fences" ```` ``` ```` to block in multiple lines of code. Use "fences" ```` ``` ```` to block in multiple lines of code.
```markdown ````plaintext
```
Sample text here... Sample text here...
``` ```
````
HTML: HTML:
@ -423,9 +425,9 @@ See [Code Highlighting]({{% relref "syntaxhighlight.md" %}}) for additional docu
For example, to apply syntax highlighting to JavaScript code: For example, to apply syntax highlighting to JavaScript code:
```plaintext ````plaintext
```js ```js
grunt.initConfig({ grunt.initConfig({
assemble: { assemble: {
options: { options: {
assets: 'docs/assets', assets: 'docs/assets',
@ -442,9 +444,9 @@ For example, to apply syntax highlighting to JavaScript code:
} }
} }
} }
}; };
```
``` ```
````
Renders to: Renders to:

View file

@ -81,7 +81,7 @@ The following steps are here to help you initialize your new website. If you don
Hugo provides a `new` command to create a new website. Hugo provides a `new` command to create a new website.
``` ```shell
hugo new site <new_project> hugo new site <new_project>
``` ```

View file

@ -7,7 +7,7 @@ You can add:
- other shortcodes besides `expand` - other shortcodes besides `expand`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```

View file

@ -5,7 +5,7 @@ description : "Nice buttons on your page."
A button is a just a clickable button with optional icon. A button is a just a clickable button with optional icon.
``` ```go
{{%/* button href="https://gohugo.io/" */%}}Get Hugo{{%/* /button */%}} {{%/* button href="https://gohugo.io/" */%}}Get Hugo{{%/* /button */%}}
{{%/* button href="https://gohugo.io/" icon="fas fa-download" */%}}Get Hugo with icon{{%/* /button */%}} {{%/* button href="https://gohugo.io/" icon="fas fa-download" */%}}Get Hugo with icon{{%/* /button */%}}
{{%/* button href="https://gohugo.io/" icon="fas fa-download" icon-position="right" */%}}Get Hugo with icon right{{%/* /button */%}} {{%/* button href="https://gohugo.io/" icon="fas fa-download" icon-position="right" */%}}Get Hugo with icon right{{%/* /button */%}}

View file

@ -7,7 +7,7 @@ The Expand shortcode displays an expandable/collapsible section of text on your
## Usage ## Usage
```` ````go
{{%/* expand "Does this relearn theme rock?" { "true" | "false" } */%}} {{%/* expand "Does this relearn theme rock?" { "true" | "false" } */%}}
Yes! Yes!
{{%/* /expand */%}} {{%/* /expand */%}}
@ -25,7 +25,7 @@ Yes, you did it!
{{% /expand %}} {{% /expand %}}
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
```` ````go
{{%/* expand */%}} {{%/* expand */%}}
Yes, you did it! Yes, you did it!
{{%/* /expand */%}} {{%/* /expand */%}}
@ -39,7 +39,7 @@ No need to press you!
{{% /expand %}} {{% /expand %}}
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
```` ````go
{{%/* expand "Expand me..." "true" */%}} {{%/* expand "Expand me..." "true" */%}}
No need to press you! No need to press you!
{{%/* /expand */%}} {{%/* /expand */%}}
@ -60,7 +60,7 @@ You can add:
- other shortcodes besides `expand` - other shortcodes besides `expand`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -68,7 +68,7 @@ You can add:
{{% /expand %}} {{% /expand %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
```` ````go
{{%/* expand "Show me endless possibilities" */%}} {{%/* expand "Show me endless possibilities" */%}}
Some expandable text. Some expandable text.
@ -81,7 +81,7 @@ You can add:
- other shortcodes besides `expand` - other shortcodes besides `expand`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```

View file

@ -7,7 +7,7 @@ The include shortcode includes other files from your project inside of the curre
## Usage ## Usage
```` ````go
{{%/* include "<file>" */%}} {{%/* include "<file>" */%}}
```` ````
@ -18,7 +18,7 @@ The include shortcode includes other files from your project inside of the curre
{{% include "shortcodes/INCLUDE_ME.md" %}} {{% include "shortcodes/INCLUDE_ME.md" %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
```` ````go
{{%/* include "shortcodes/INCLUDE_ME.md" */%}} {{%/* include "shortcodes/INCLUDE_ME.md" */%}}
```` ````
{{% /expand %}} {{% /expand %}}

View file

@ -10,7 +10,7 @@ description : "Generation of diagram and flowchart from text in a similar manner
Just insert your mermaid code in the `mermaid` shortcode like this: Just insert your mermaid code in the `mermaid` shortcode like this:
```` ````go
{{</* mermaid [ align=(left|right|center|justify) ] */>}} {{</* mermaid [ align=(left|right|center|justify) ] */>}}
classDiagram classDiagram
Person *-- Dog Person *-- Dog
@ -43,7 +43,7 @@ graph LR;
{{< /mermaid >}} {{< /mermaid >}}
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
```` ````go
{{</* mermaid align="left" */>}} {{</* mermaid align="left" */>}}
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
@ -71,7 +71,7 @@ sequenceDiagram
{{< /mermaid >}} {{< /mermaid >}}
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
```` ````go
{{</* mermaid */>}} {{</* mermaid */>}}
sequenceDiagram sequenceDiagram
participant Alice participant Alice
@ -109,7 +109,7 @@ gantt
{{< /mermaid >}} {{< /mermaid >}}
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
```` ````go
{{</* mermaid */>}} {{</* mermaid */>}}
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@ -150,7 +150,7 @@ classDiagram
{{< /mermaid >}} {{< /mermaid >}}
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
```` ````go
{{</* mermaid */>}} {{</* mermaid */>}}
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@ -184,7 +184,7 @@ stateDiagram-v2
{{< /mermaid >}} {{< /mermaid >}}
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
```` ````go
{{</* mermaid */>}} {{</* mermaid */>}}
stateDiagram-v2 stateDiagram-v2
open: Open Door open: Open Door

View file

@ -7,7 +7,7 @@ The notice shortcode shows four types of disclaimers to help you structure your
## Usage ## Usage
```` ````go
{{%/* notice [ note | info | tip | warning ] */%}} {{%/* notice [ note | info | tip | warning ] */%}}
Some markup Some markup
{{%/* /notice */%}} {{%/* /notice */%}}
@ -29,7 +29,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -37,7 +37,7 @@ You can add:
{{% /notice %}} {{% /notice %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
```` ````go
{{%/* notice note */%}} {{%/* notice note */%}}
A **notice** disclaimer A **notice** disclaimer
@ -50,7 +50,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -73,7 +73,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -81,7 +81,7 @@ You can add:
{{% /notice %}} {{% /notice %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
```` ````go
{{%/* notice info */%}} {{%/* notice info */%}}
An **information** disclaimer An **information** disclaimer
@ -94,7 +94,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -117,7 +117,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -125,7 +125,7 @@ You can add:
{{% /notice %}} {{% /notice %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
```` ````go
{{%/* notice tip */%}} {{%/* notice tip */%}}
A **tip** disclaimer A **tip** disclaimer
@ -138,7 +138,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -161,7 +161,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```
@ -169,7 +169,7 @@ You can add:
{{% /notice %}} {{% /notice %}}
{{% expand "Show markup" %}} {{% expand "Show markup" %}}
```` ````go
{{%/* notice warning */%}} {{%/* notice warning */%}}
A **warning** disclaimer A **warning** disclaimer
@ -182,7 +182,7 @@ You can add:
- other shortcodes besides `notice` - other shortcodes besides `notice`
- etc. - etc.
``` ```plaintext
...and even source code ...and even source code
``` ```

View file

@ -14,7 +14,7 @@ For instance, in this current site, the `editURL` variable is used in `config.to
Use the `siteparam` shortcode to display its value. Use the `siteparam` shortcode to display its value.
``` ```go
`editURL` Value : {{%/* siteparam "editURL" */%}} `editURL` Value : {{%/* siteparam "editURL" */%}}
``` ```