Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Typography

Share via
Hinode
Link copied to clipboard

Use a mix of Markdown and HTML syntax to style your content.

On this page
 

  • Headings
  • Display headings
  • Lead
  • Inline text elements
    • Native Markdown
    • Extended Styling
  • Emoji
  • Abbreviations
  • Blockquotes
    • Blockquote without attribution
    • Blockquote with attribution
  • Code Blocks
  • List Types
    • Ordered List
    • Unordered List
    • Nested list
    • Task list
  • Mathemetical formulas

Hinode uses a mix of basic Markdown syntax enriched with Bootstrap styling for the typography. The following paragraphs illustrate the most common applications. Refer to the Hugo documentation to review the extended description of supported content formats  . It also contains links to external resource about Markdown.

Headings  

Use the native Markdown character # to generate headings for your content. The following input represents six levels of section headings. They are generated as HTML <h1>—<h6> elements. <h1> is the highest section level while <h6> is the lowest.

H1. Heading  

H2. Heading  

H3. Heading  

H4. Heading  

H5. Heading  
H6. Heading  
markdown
# H1. Heading

## H2. Heading

### H3. Heading

#### H4. Heading

##### H5. Heading

###### H6. Heading

Alternatively, you can use .h1 through .h6 classes, for when you want to match the font styling of a heading but cannot use the associated HTML element. For example, using a .h2 class will exclude the section heading from the generated table of contents.

H1

H2

H3

H4

H5

H6

markdown
H1
{.h1}

H2
{.h2}

H3
{.h3}

H4
{.h4}

H5
{.h5}

H6
{.h6}

Display headings  

Display a larger, slightly more opinionated heading style by adding the .display class.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

markdown
Display 1
{.display-1}

Display 2
{.display-2}

Display 3
{.display-3}

Display 4
{.display-4}

Display 5
{.display-5}

Display 6
{.display-6}

Lead  

Make a paragraph stand out by adding the .lead class.

This is a lead paragraph. It stands out from regular paragraphs.

markdown
This is a lead paragraph. It stands out from regular paragraphs.
{.lead}

Inline text elements  

You can use native Markdown to apply basic styling. Use HTML elements for additional formatting options.

Native Markdown  

Use native Markdown apply basic styling to your text.

This line of text is meant to be treated as deleted text.

This line of text renders as underlined.

This line of text renders as bold text.

This line of text renders as italicized text.

markdown
~~This line of text is meant to be treated as deleted text.~~

_This line of text renders as underlined._

**This line of text renders as bold text.**

*This line of text renders as italicized text.*

Extended Styling  

Added in v0.19.0  

Use shortcodes and classes for additional styling options. The following example illustrates highlighting, fine print, subscript, and superscript.

You can use the mark shortcode to highlight text.

This line of text is meant to be treated as fine print.

H2O is a liquid.

210 is 1024.

markdown
You can use the mark shortcode to {{< mark >}}highlight{{< /mark >}} text.

This line of text is meant to be treated as fine print.
{.small}

H{{< sub 2 >}}O is a liquid.

2{{< sup 10 >}} is 1024.

Emoji  

Use shortcodes to insert Emoji into your content. You can use this list of emoji  shortcodes as a reference, although the results may vary across browsers and devices. The following example inserts an inline smiley.

That is so funny! :smiley: That is so funny! :smiley:

The result looks like this:

That is so funny! 😃

Abbreviations  

Use the abbr shortcode for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

HTML
markdown
{{< abbr HTML >}}

Blockquotes  

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. Use the > Markdown character to generate a blockquote and add {.blockquote} at the bottom of the block to apply the correct styling.

Blockquote without attribution  

The following Markdown generates a blockquote without attribution.

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

markdown
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.
{.blockquote}

Blockquote with attribution  

The following Markdown generates a blockquote with attribution. The citation itself is added to the bottom of the page.

Don’t communicate by sharing memory, share memory by communicating.

— Rob Pike1


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

markdown
> Don't communicate by sharing memory, share memory by communicating.
>
> — *Rob Pike[^1]*
{.blockquote}

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

Code Blocks  

Use a single backtick ` character to denote an inline code element. Use triple backticks ``` to denote the start and end of a code block. Add the language to the opening backticks to specify the syntax. Hugo uses Chroma highlighting to style the syntax of supported languages  . The following example defines an HTML code block.

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

List Types  

Use native Markdown to define ordered lists, unordered lists, and nested lists.

Ordered List  

The following Markdown defines an ordered list of three items. The sequence is automatically determined, so simply add 1. at the start of each element. The linting rules will raise an error if you add the sequence numbering yourself.

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

Unordered List  

Use the - character to denote an unordered list.

  • List item
  • Another item
  • And another item
markdown
- List item
- Another item
- And another item

Nested list  

Use indendation and the - character to denote a nested list.

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

Task list  

Use the - character followed by either [x] or [ ] to indicate a (completed) task.

  • Write the press release
  • Update the website
  • Contact the media
markdown
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Mathemetical formulas  

Added in v0.16.0  

Use KaTeX  to add mathemetical formulas to your content pages. By default, the support for KaTeX is optional. Be sure to include katex in your module configuration and page frontmatter as needed.

This is an inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formula

This is not an inline formula:

$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$
$$\forall x \in X, \quad \exists y \leq \epsilon$$

markdown
This is an inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formula

This is not an inline formula:

$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$  
$$\forall x \in X, \quad \exists y \leq \epsilon$$
Last updated: September 2, 2023 • Update references to release v0.19.0 (2487fd0)
On this page
  • Headings
  • Display headings
  • Lead
  • Inline text elements
    • Native Markdown
    • Extended Styling
  • Emoji
  • Abbreviations
  • Blockquotes
    • Blockquote without attribution
    • Blockquote with attribution
  • Code Blocks
  • List Types
    • Ordered List
    • Unordered List
    • Nested list
    • Task list
  • Mathemetical formulas
Typography
Typography
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.21.8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues  
Discussions  
Contribute 
Hinode
Code copied to clipboard