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

File

Share via
Hinode
Link copied to clipboard

The file shortcode prints the full content of any given file with syntax highlighting.

On this page
 

  • Overview
  • Arguments
  • Examples
    • Default file preview
    • Collapsed file preview
    • File preview with filename only

Overview  

Added in v0.16.0  

The file shortcode prints and highlights the full content of a given input file. It recognizes the languages supported by Hugo’s highlight function  .

  • config/_default/languages.toml
[en]
    languageName = "English"
    contentDir = "content/en"
    weight = 1
    [en.params.head]
        tagline = "A Hugo Theme"
    [en.params.footer]
        license = "Code licensed <a href='https://github.com/gethinode/hinode/blob/main/LICENSE' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>MIT</a>, docs <a href='https://creativecommons.org/licenses/by-nc/4.0/' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>CC BY-NC 4.0</a>"
...
markdown
{{< file path="./config/_default/languages.toml" id="file-collapse-1" >}}

Arguments  

 
The definition of the default id field fails when embedding (multiple) file shortcodes in an example. Provide an explicit, unique id to prevent cross-interference.

The shortcode supports the following arguments:

ArgumentRequiredDescription
pathYesPath of the input file. The path is relative to the basePath defined in the docs section of the site’s parameters (see page layout). If the file starts with ./, the path of the repository is used as base path instead.
langNoLanguage to be used by the syntax highlighter. When no language is specified, the shortcode derives the language from the input file’s extension.
showNoIf unset, shows the panel with the code snippet in collapsed state. By default, the panel is expanded.
fullNoIf unset, shows the filename only. By default, the full relative path is shown.
idNoOptional id of the collapse panel, defaults to “file-collapse-n” with a sequential number n starting at 1.
classNoOptional class argument of the tab control.

Examples  

Change the style and language of your file preview with shortcode arguments.

Default file preview  

Use the path argument to print the content of a specific file. By default, the shortcode uses the site’s basePath (see page layout for more information).

  • /config/_default/languages.toml
# toml-docs-start lang-main
[en]
    languageName = "English"
    contentDir = "content"
    weight = 1
# toml-docs-end lang-main
# toml-docs-start lang-param
    [en.params.head]
        tagline = "A Hugo Theme"
    [en.params.social]
        title = "Follow me"
        caption = "I work on everything coding and tweet developer memes"
    [en.params.footer]
        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
# toml-docs-end lang-param
...
markdown
{{< file path="config/_default/languages.toml" id="file-collapse-2" >}}

Provide a path that starts with ./ to use the path of the repository as base path instead.

  • config/_default/languages.toml
[en]
    languageName = "English"
    contentDir = "content/en"
    weight = 1
    [en.params.head]
        tagline = "A Hugo Theme"
    [en.params.footer]
        license = "Code licensed <a href='https://github.com/gethinode/hinode/blob/main/LICENSE' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>MIT</a>, docs <a href='https://creativecommons.org/licenses/by-nc/4.0/' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>CC BY-NC 4.0</a>"
...
markdown
{{< file path="./config/_default/languages.toml" id="file-collapse-3" >}}

Collapsed file preview  

Set show to false to hide the file content on page load. The content is reveiled when clicking the tab control.

  • config/_default/languages.toml
[en]
    languageName = "English"
    contentDir = "content/en"
    weight = 1
    [en.params.head]
        tagline = "A Hugo Theme"
    [en.params.footer]
        license = "Code licensed <a href='https://github.com/gethinode/hinode/blob/main/LICENSE' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>MIT</a>, docs <a href='https://creativecommons.org/licenses/by-nc/4.0/' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>CC BY-NC 4.0</a>"
...
markdown
{{< file show="false"  path="./config/_default/languages.toml" id="file-collapse-4" >}}

File preview with filename only  

Set full to false to show the filename only.

  • languages.toml
[en]
    languageName = "English"
    contentDir = "content/en"
    weight = 1
    [en.params.head]
        tagline = "A Hugo Theme"
    [en.params.footer]
        license = "Code licensed <a href='https://github.com/gethinode/hinode/blob/main/LICENSE' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>MIT</a>, docs <a href='https://creativecommons.org/licenses/by-nc/4.0/' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>CC BY-NC 4.0</a>"
...
markdown
{{< file full="false" path="./config/_default/languages.toml" id="file-collapse-5" >}}
Last updated: August 5, 2023 • Add file shortcode (52482a2)
On this page
  • Overview
  • Arguments
  • Examples
    • Default file preview
    • Collapsed file preview
    • File preview with filename only
File
File
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