Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
Docs
  • Getting Started
    • Introduction
    • Commands
    • Hosting and Deployment
    • Upgrading
    • Private Modules and Packages
    • Contribute
    • Troubleshooting
  • Content
    • Content Management
    • Content Organization
    • Typography
    • Links and Cross-References
    • Images and Figures
    • Tables
    • Icons
  • Configuration
    • Layout
    • Colors
    • Color Modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Cookie Consent
    • Digital Asset Managers
  • Components
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button Group
    • Card
    • Card Group
    • Carousel
    • Collapse
    • Command Prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Ins
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and Tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • Video
  • Advanced Settings
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial Development
    • Module Development
    • Server Headers
    • Server-Side Redirection
  • About
    • Credits
    • License
  • Getting Started
    • Introduction
    • Commands
    • Hosting and Deployment
    • Upgrading
    • Private Modules and Packages
    • Contribute
    • Troubleshooting
  • Content
    • Content Management
    • Content Organization
    • Typography
    • Links and Cross-References
    • Images and Figures
    • Tables
    • Icons
  • Configuration
    • Layout
    • Colors
    • Color Modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Cookie Consent
    • Digital Asset Managers
  • Components
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button Group
    • Card
    • Card Group
    • Carousel
    • Collapse
    • Command Prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Ins
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and Tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • Video
  • Advanced Settings
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial Development
    • Module Development
    • Server Headers
    • Server-Side Redirection
  • About
    • 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   Syntax Highlighting  

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  

  Important

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.
options string v0.27.6      Hugo highlighting options.
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.
Name Type Required Default
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.
options string
v0.27.6      Hugo highlighting options.
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 nofollow'>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.

  • 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" >}}

Syntax Highlighting  

Added in 0.27.6   

Use the Hugo Syntax Highlighting Options  for marking lines in the file. Pass the settings to the options argument.

  • languages.toml
10
11
12
13
14
15
16
17
[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"
    options="linenos=table,hl_lines=2-4 6,linenostart=10" >}}
• Update to Hinode v0.27.13 (b6f5054)
On this page:
Overview   Arguments   Examples   Default File Preview   Collapsed File Preview   File Preview With Filename Only   Syntax Highlighting  
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.29.3
Privacy | Cookies
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting Started 
Developing Modules 
Optimization 
Versioning 
Community
Issues   
Discussions   
Contribute 
Hinode
Code copied to clipboard