alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5190eb1920
hugo-theme-next/exampleSite/content/post/03-markdown-syntax/index.en-us.md
elkan1788 5190eb1920 🔥 📝 Fixed #148 Add English language support.
2025-01-29 21:29:33 +08:00

6.5 KiB
Raw Blame History

Title description isCJKLanguage publishDate lastmod author originLink categories tags toc draft url
Markdown Syntax Support Describe the various markdown syntax and effect displays supported by NexT themes false 2025-01-25T20:52:18+08:00 2025-01-25T20:52:18+08:00 Mainroad https://mainroad-demo.netlify.app/demo/basic-elements/
Example
Markdown Syntax
Markdown
Grammar
false false demo/markdown-syntax.html

Only use this article to test whether the various syntax written in the content of the Markdown file is supported when building a website using the Hugo engine in the NexT theme, and demonstrate the actual effect.

Title Style

Let's start with all possible headings, where the <h1> - <h6> elements in HTML represent six different levels of heading styles, with <h1> being the maximum heading< H6> is the minimum title, with the following effect:

Title 1

Title 2

Title 3

Title 4

Title 5
Title 6

Paragraph format

According to W3CDefined HTML5 Specification，HTML documents consist of elements and text. The composition of each element consists of a Start marker, for example:< body> ， And End Mark, for example:</ body> .

(Some start and end markers may be omitted in certain situations and implied by other markers.)

Elements can have attributes that control how they work. For example, hyperlinks are formed using the a element and its ref attribute.

Markdown syntax

! [Image Description] (Image Address)

hugo-next-primary

HTML IMG tags

<img src="Image Address" width="Width" height="Height"/>

SVG format

<svg>xxxxxx</svg>

List type

Ordered List

  1. The first element
  2. The second element
  3. The third element

Unordered List

  • List elements
  • Another element
  • And other elements

Nested List

Using HTML's ul element to implement.

  • First item
  • Second item
    • Second item First subitem
    • Second item second subitem
      • Second item Second subitem First sub-subitem
      • Second item Second subitem Second sub-subitem
      • Second item Second subitem Third sub-subitem
    • Second item Third subitem
      1. Second item Third subitem First sub-subitem
      2. Second item Third subitem Second sub-subitem
      3. Second item Third subitem Third sub-subitem
  • Third item

Custom List

Custom lists (table lists) are also supported through HTML's dl element.

Hugo directory structure
assets
hugo.toml
content
data
theme
static
Hugo Template
Basic Template
List Template
Single page template

Block reference

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Quoted text. This line is part of the same quote. Also you can put Markdown into a blockquote.

Blockquote with a citation.

My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.

— Steve Wozniak

According to Mozilla's website, Firefox 1.0 was released in 2004 and became a big success.

Table

Tables aren't part of the core Markdown spec, but Hugo supports them.

ID Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Colons can be used to align columns.

Tables Are Cool
align: left align: center align: right
align: left align: center align: right
align: left align: center align: right

You can also use inline Markdown.

Inline Markdown In Table
italics bold strikethrough code

Code

Use Markdown syntax to write code blocks:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>

Use Hugo's highlight shortcode to write code blocks:

{{< highlight html "hl_lines=2 5-7, linenostart=44" >}}

<html lang="en"> <head> </head>

Test

</html> {{< /highlight >}}

Other stuff — abbr, sub, sup, kbd, etc.

GIF is a bitmap image format.

H2O

C6H12O6

Xn + Yn = Zn

Press X to win. Or press CTRL+ALT+F to show FPS counter.

As a unit of information in information theory, the bit has alternatively been called a shannon, named after Claude Shannon, the founder of field of information theory.

Reference resources: