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
    • Args
    • 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
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • YouTube
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial development
    • 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
    • Args
    • 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
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • YouTube
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial development
    • 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:

Name Type Required Default Comment
class string Class attribute of the tab control that wraps the file element.
full bool true If unset, shows the filename only. By default, the entire path (relative to the base path) is shown.
id string Identifier of the collapse panel, defaults to file-collapse-n with a sequential number n starting at 1.
lang string Language to be used by the syntax highlighter. If not set, the language is derived from the file extension.
path string yes Path of the input file. The path is relative to the basePath defined in the docs section of the site’s parameters. If the file starts with ./, the path of the repository is used as base path instead.
show bool If unset, shows the panel with the code in collapsed state. By default, the panel is expanded.

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 revealed 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.

  • 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 full="false" path="./config/_default/languages.toml" id="file-collapse-5" >}}
Last updated: January 2, 2024 • Fix typo (72aaf59)
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.22.0-beta8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues   
Discussions   
Contribute 
Hinode
Code copied to clipboard