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

` - `

` elements in HTML represent six different levels of heading styles, with `

` 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 [W3C](https://www.w3.org/)Defined [HTML5 Specification](https://www.w3.org/TR/html5/dom.html#elements)，HTML documents consist of elements and text. The composition of each element consists of a [Start marker](https://www.w3.org/TR/html5/syntax.html#syntax), for example:`` ， And [End Mark](https://www.w3.org/TR/html5/syntax.html#syntax), for example:`` . (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 ```markdown ! [Image Description] (Image Address) ``` ![hugo-next-primary](//hugo-next.github.io/imgs/logo/hugo-next-primary.png) ### HTML IMG tags ```html ``` ### SVG format ```html ``` ## 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

Second item Third subitem First sub-subitem

Second item Third subitem Second sub-subitem

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: ```html Example HTML5 Document
Test
``` Use Hugo's `highlight` shortcode to write code blocks: {{< highlight html "hl_lines=2 5-7, linenostart=44" >}} Example HTML5 Document
Test
{{< /highlight >}} ## Other stuff — abbr, sub, sup, kbd, etc. GIF is a bitmap image format. H₂O C₆H₁₂O₆ Xⁿ + Yⁿ = Zⁿ 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: - Refert from Mainroad theme [Basic Elements](https://mainroad-demo.netlify.app/post/basic-elements/)Content