Files
hextra_mirror/exampleSite/content/docs/guide/markdown.md
Xin 6823cc1fe8 refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes

- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.

* refactor(search): update class names for search components

- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.

* refactor(search): update search component class names for consistency

- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.

* refactor(sidebar): rename sidebar classes for consistency

- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.

* refactor(language & theme): update class names for consistency

- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.

* refactor(css & html): rename classes for consistency and clarity

- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.

* refactor(language): update class names for language options

- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.

* refactor(css & html): rename classes for consistency and clarity

- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.

* feat(typography): add styling for horizontal lines

- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.

* feat(blog): add draft release announcement for Hextra v0.10.0

- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.

* refactor(css & html): rename `hextra-content` class to `content` for consistency

- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.

* refactor(typography & markdown): enhance table styling and markdown syntax

- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.

* fix(blog): update text color for improved accessibility

- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.

* docs(blog): update draft release announcement for Hextra v0.10.0

- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.

* chore: rebuild css
2025-08-13 22:55:38 +08:00

5.3 KiB

title, weight
title weight
Markdown 2

Hugo supports Markdown syntax for formatting text, creating lists, and more. This page will show you some of the most common Markdown syntax examples.

Markdown Examples

Styling Text

Style Syntax Example Output
Bold **bold text** **bold text** bold text
Italic *italicized text* *italicized text* italicized text
Strikethrough ~~strikethrough text~~ ~~strikethrough text~~ strikethrough text
Subscript <sub></sub> This is a <sub>subscript</sub> text This is a subscript text
Superscript <sup></sup> This is a <sup>superscript</sup> text This is a superscript text

Blockquotes

Blockquote with attribution

Don't communicate by sharing memory, share memory by communicating.
Rob Pike1

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.

Alerts

{{< new-feature version="v0.9.0" >}}

Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information. GitHub-style alerts are supported. Please make sure you are using the latest version of Hextra and Hugo v0.146.0 or later.

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Tables

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

Name Age
Bob 27
Alice 23
| Name  | Age |
| :---- | :-- |
| Bob   | 27  |
| Alice | 23  |

Inline Markdown within tables

Italics Bold Code
italics bold code
| Italics   | Bold     | Code   |
| :-------- | :------- | :----- |
| _italics_ | **bold** | `code` |

Code Blocks

{{< cards >}} {{< card link="../../guide/syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}} {{< /cards >}}

Lists

Ordered List

  1. First item
  2. Second item
  3. Third item
1. First item
2. Second item
3. Third item

Unordered List

  • List item
  • Another item
  • And another item
* List item
* Another item
* And another item

Nested list

  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese
- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

Images

landscape

![landscape](https://picsum.photos/800/600)

With caption:

landscape

![landscape](https://picsum.photos/800/600 "Lorem Picsum")

For more advanced functionality, use Hugo's built-in Figure shortcode.

Configuration

Hugo uses Goldmark for Markdown parsing. Markdown rendering can be configured in hugo.yaml under markup.goldmark. Below is the default configuration for Hextra:

markup:
  goldmark:
    renderer:
      unsafe: true
  highlight:
    noClasses: false

For more configuration options, see Hugo documentation on Configure Markup.

Learning Resources


  1. The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015. ↩︎