mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +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.
|
||||
|
||||
```
|
||||
```shell
|
||||
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.
|
||||
|
||||
```
|
||||
```markdown
|
||||
### Chapter 1
|
||||
|
||||
# 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
|
||||
|
||||
```
|
||||
```shell
|
||||
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:
|
||||
|
||||
```
|
||||
```shell
|
||||
hugo new basics/first-content.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:
|
||||
|
||||
```
|
||||
```shell
|
||||
hugo serve
|
||||
```
|
||||
|
||||
|
@ -91,7 +91,7 @@ You should notice three things:
|
|||
|
||||
When your site is ready to deploy, run the following command:
|
||||
|
||||
```
|
||||
```shell
|
||||
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
|
||||
|
||||
```
|
||||
```shell
|
||||
hugo new --kind chapter <name>/_index.md
|
||||
```
|
||||
|
||||
It will create a page with predefined Front-Matter:
|
||||
|
||||
```markdown
|
||||
```toml
|
||||
+++
|
||||
title = "{{ replace .Name "-" " " | title }}"
|
||||
date = {{ .Date }}
|
||||
|
@ -35,18 +35,21 @@ Lorem Ipsum.
|
|||
|
||||
## 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
|
||||
|
||||
```
|
||||
# Either
|
||||
```shell
|
||||
hugo new <chapter>/<name>/_index.md
|
||||
# Or
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```shell
|
||||
hugo new <chapter>/<name>.md
|
||||
```
|
||||
|
||||
It will create a page with predefined Front-Matter:
|
||||
|
||||
```markdown
|
||||
```toml
|
||||
+++
|
||||
title = "{{ replace .Name "-" " " | title }}"
|
||||
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:
|
||||
|
||||
```
|
||||
```html
|
||||
<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.
|
||||
|
||||
```
|
||||
```html
|
||||
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.
|
||||
|
||||
```markdown
|
||||
````plaintext
|
||||
```
|
||||
Sample text here...
|
||||
```
|
||||
````
|
||||
|
||||
HTML:
|
||||
|
||||
|
@ -423,28 +425,28 @@ See [Code Highlighting]({{% relref "syntaxhighlight.md" %}}) for additional docu
|
|||
|
||||
For example, to apply syntax highlighting to JavaScript code:
|
||||
|
||||
```plaintext
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
````plaintext
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
};
|
||||
```
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
````
|
||||
|
||||
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.
|
||||
|
||||
```
|
||||
```shell
|
||||
hugo new site <new_project>
|
||||
```
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ You can add:
|
|||
- other shortcodes besides `expand`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...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.
|
||||
|
||||
```
|
||||
```go
|
||||
{{%/* 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" 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
|
||||
|
||||
````
|
||||
````go
|
||||
{{%/* expand "Does this relearn theme rock?" { "true" | "false" } */%}}
|
||||
Yes!
|
||||
{{%/* /expand */%}}
|
||||
|
@ -25,7 +25,7 @@ Yes, you did it!
|
|||
{{% /expand %}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* expand */%}}
|
||||
Yes, you did it!
|
||||
{{%/* /expand */%}}
|
||||
|
@ -39,7 +39,7 @@ No need to press you!
|
|||
{{% /expand %}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* expand "Expand me..." "true" */%}}
|
||||
No need to press you!
|
||||
{{%/* /expand */%}}
|
||||
|
@ -60,7 +60,7 @@ You can add:
|
|||
- other shortcodes besides `expand`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -68,7 +68,7 @@ You can add:
|
|||
{{% /expand %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* expand "Show me endless possibilities" */%}}
|
||||
Some expandable text.
|
||||
|
||||
|
@ -81,7 +81,7 @@ You can add:
|
|||
- other shortcodes besides `expand`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ The include shortcode includes other files from your project inside of the curre
|
|||
|
||||
## Usage
|
||||
|
||||
````
|
||||
````go
|
||||
{{%/* include "<file>" */%}}
|
||||
````
|
||||
|
||||
|
@ -18,7 +18,7 @@ The include shortcode includes other files from your project inside of the curre
|
|||
{{% include "shortcodes/INCLUDE_ME.md" %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* include "shortcodes/INCLUDE_ME.md" */%}}
|
||||
````
|
||||
{{% /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:
|
||||
|
||||
````
|
||||
````go
|
||||
{{</* mermaid [ align=(left|right|center|justify) ] */>}}
|
||||
classDiagram
|
||||
Person *-- Dog
|
||||
|
@ -43,7 +43,7 @@ graph LR;
|
|||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````
|
||||
````go
|
||||
{{</* mermaid align="left" */>}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
|
@ -71,7 +71,7 @@ sequenceDiagram
|
|||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
|
@ -109,7 +109,7 @@ gantt
|
|||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
|
@ -150,7 +150,7 @@ classDiagram
|
|||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
|
@ -184,7 +184,7 @@ stateDiagram-v2
|
|||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
stateDiagram-v2
|
||||
open: Open Door
|
||||
|
|
|
@ -7,7 +7,7 @@ The notice shortcode shows four types of disclaimers to help you structure your
|
|||
|
||||
## Usage
|
||||
|
||||
````
|
||||
````go
|
||||
{{%/* notice [ note | info | tip | warning ] */%}}
|
||||
Some markup
|
||||
{{%/* /notice */%}}
|
||||
|
@ -29,7 +29,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -37,7 +37,7 @@ You can add:
|
|||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* notice note */%}}
|
||||
A **notice** disclaimer
|
||||
|
||||
|
@ -50,7 +50,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -73,7 +73,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -81,7 +81,7 @@ You can add:
|
|||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* notice info */%}}
|
||||
An **information** disclaimer
|
||||
|
||||
|
@ -94,7 +94,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -117,7 +117,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -125,7 +125,7 @@ You can add:
|
|||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* notice tip */%}}
|
||||
A **tip** disclaimer
|
||||
|
||||
|
@ -138,7 +138,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -161,7 +161,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
|
@ -169,7 +169,7 @@ You can add:
|
|||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````
|
||||
````go
|
||||
{{%/* notice warning */%}}
|
||||
A **warning** disclaimer
|
||||
|
||||
|
@ -182,7 +182,7 @@ You can add:
|
|||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```
|
||||
```plaintext
|
||||
...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.
|
||||
|
||||
```
|
||||
```go
|
||||
`editURL` Value : {{%/* siteparam "editURL" */%}}
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in a new issue