mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
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:
parent
32d3d80b80
commit
42c8ec549b
12 changed files with 72 additions and 67 deletions
|
@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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:
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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 */%}}
|
||||||
|
|
|
@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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 %}}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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" */%}}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue