Hinode logo
  • About 
  • Blog 
  • Projects 
    • Sample project 
    • Another project 
  • Tags 

  •  Language
    • English
    • Français
    • Nederlands
  1. Home
  2. Blog
  3. File highlighting

File highlighting

Posted on September 23, 2023  (Last modified on October 25, 2024) • 4 min read • 768 words
File   Shortcode  
File   Shortcode  
Share via
Hinode
Link copied to clipboard

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

On this page
  • File Shortcode
  • Default configuration
  • Current page as markdown file
File highlighting
Photo by Ryoji Iwata  on Unsplash 

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

File Shortcode  

Use the Hugo syntax highlighting options for marking lines in the file. Hugo Documentation 

  • layouts/shortcodes/file.html
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!-- 
    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
    Visit gethinode.com/license for more details.

    This source code adapts the original embedded shortcode as maintained by the The Bootstrap Authors. It introduces
    the following modifications:
     - Added validation of shortcode arguments
     - Modified the layout
    
    The original source code is available on:
    Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
    Copyright (c) 2011-2023 The Bootstrap Authors. Licensed under The MIT License (MIT).
-->

{{ $error := false -}}

<!-- Validate arguments -->
{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "file" "args" .Params) }}
    {{ errorf "Invalid arguments: %s" .Position -}}
    {{ $error = true }}
{{ end }}

<!-- Initialize arguments -->
{{- $basePath := .Site.Params.docs.basePath -}}
{{- $file := .Get "path" | default "" -}}
{{- if hasPrefix $file "./" -}}
    {{- $file = path.Clean $file -}}
{{- else -}}
    {{- $file = path.Join $basePath (path.Clean $file) -}}
{{- end -}}

{{- $extension := strings.TrimLeft "." (path.Ext $file)  }}
{{- $lang := .Get "lang" | default $extension -}}
{{- $id := .Get "id" | default (printf "file-collapse-%d" .Ordinal) -}}
{{- $show := true -}}
{{ if isset .Params "show" }}{{ $show = partial "utilities/CastBool.html" (.Get "show") }}{{ end -}}
{{- $full := true -}}
{{ if isset .Params "full" }}{{ $full = partial "utilities/CastBool.html" (.Get "full") }}{{ end -}}
{{- $class := .Get "class" | default "" -}}
{{- $options := .Get "options" -}}

{{ if not (fileExists $file) }}
    {{ warnf "Cannot find file: '%q'. See %s" $file $.Position }}
    {{ $error = true }}
{{ end }}

<!-- Main code -->
{{- if not $error -}}
    {{- /* Force-check if the file exists */ -}}
    {{ $tmp := os.Stat $file }}
    {{- $content := readFile $file -}}

    <ul class="nav nav-tabs{{ with $class }} {{ . }}{{ end }}">
        <li class="nav-item">
            <a class="nav-link active font-monospace" 
                href="#body-{{ $id }}" 
                aria-current="page" 
                data-bs-toggle="collapse" 
                data-bs-target=".multi-{{ $id }}" 
                aria-expanded="false" 
                aria-controls="body-{{ $id }} footer-{{ $id }}">
                <small>{{ if $full }}{{ strings.TrimPrefix $basePath $file }}{{ else }}{{ path.Base $file }}{{ end }}</small>
            </a>
        </li>
    </ul>
    <div class="border-start border-end border-bottom mb-3">
        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
            {{- highlight (trim $content "\r\n") $lang $options -}}
        </div>
        <div class="collapse multi-{{ $id }}{{ if not $show }} show{{ end }} p-3" id="footer-{{ $id }}"><i>...</i></div>
    </div>
{{- end -}}
...

Default configuration  

  • config/_default/markup.toml
defaultMarkdownHandler = "goldmark"

[highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = true
    hl_Lines = ""
    lineAnchors = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = false
    noClasses = false
    tabWidth = 2
    ## Update the 'create:syntax' command in package.json to modify the style
    ## The first two lines have been modified to remove the background color
    # style = "monokailight" 

[goldmark]
    [goldmark.extensions]
        definitionList = true
        footnote = true
        linkify = true
        strikethrough = true
        table = true
        taskList = true
        typographer = true
    [goldmark.extensions.passthrough]
        enable = true
    [goldmark.extensions.passthrough.delimiters]
        block = [['\[', '\]'], ['$$', '$$']]
        inline = [['\(', '\)'], ['$', '$']]
    [goldmark.parser]
        autoHeadingID = true
        autoHeadingIDType = 'github'
        wrapStandAloneImageWithinParagraph = false
    [goldmark.parser.attribute]
        block = true
    [goldmark.renderer]
        hardWraps = false
        unsafe = false
        xhtml = false
...

Current page as markdown file  

  • content/en/blog/file-highlight.md
---
author: Hinode Contributors
title: File highlighting
date: 2023-09-23
description: The file shortcode prints the full content of any given file with syntax highlighting
tags: ["file", "shortcode"]
thumbnail:
  url: img/puzzle.jpg
  author: Ryoji Iwata
  authorURL: https://unsplash.com/@ryoji__iwata
  origin: Unsplash
  originURL: https://unsplash.com/photos/5siQcvSxCP8
---

The [file shortcode](https://gethinode.com/docs/components/file/) prints and highlights the full content of a given input file. It recognizes the languages supported by Hugo’s highlight function.

## File Shortcode

Use the Hugo syntax highlighting options for marking lines in the file.
[Hugo Documentation](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode)

{{< file full="true" show="true" path="./layouts/shortcodes/file.html" options="linenos=table,hl_lines=41 68-70,linenostart=42" >}}

## Default configuration

{{< file full="true" show="false" path="./config/_default/markup.toml" >}}

## Current page as markdown file

{{< file full="true" show="true" path="./content/en/blog/file-highlight.md" >}}
...
 Components
Bootstrap elements 
On this page:
  • File Shortcode
  • Default configuration
  • Current page as markdown file
Follow me

I work on everything coding and tweet developer memes

     
Copyright © 2024 Mark Dumay. | Privacy | Cookies | Powered by Hinode  .
Hinode
Code copied to clipboard