Commonplace Book/tags/computing/Recent content on Commonplace BookHugo -- gohugo.ioen-USFri, 06 Jun 2025 15:15:00 +0000Pandoc from Markdown to HTML/posts/1c2-pandoc-markdown-to-html/Fri, 06 Jun 2025 15:15:00 +0000/posts/1c2-pandoc-markdown-to-html/<p><a href="../../posts/1c-pandoc/">Pandoc</a> can convert from <a href="../../posts/1a-markdown/">Markdown</a> to HTML with a single command.</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-sh" data-lang="sh"><span style="display:flex;"><span>pandoc -s -o output.html input.md </span></span></code></pre></div>Pandoc can convert from Markdown to HTML with a single command.

pandoc -s -o output.html input.md
]]>Hugo Backlinks/posts/1b1-hugo-backlinks/Fri, 30 May 2025 18:45:00 +0000/posts/1b1-hugo-backlinks/<p>Backlinks can be added to Hugo using templates and shortcodes. <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p><a href="https://aaron.com.es/blog/add-backlinks-to-hugo/">Guide for Backlinks in Hugo</a>&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p> </li> </ol> </div>Backlinks can be added to Hugo using templates and shortcodes. 1

  1. Guide for Backlinks in Hugo ↩︎

]]>Date Time Shortcut/posts/1d1a-datetime-shortcut/Fri, 30 May 2025 17:54:00 +0000/posts/1d1a-datetime-shortcut/<p>When writing Markdown in VS Code it&rsquo;s useful to be able to insert the current date and time quickly. You can do this by setting up a keyboard shortcut<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> that inserts the current date and time in a specific format.</p> <p>To set up a date time shortcut in VS Code, follow these steps:</p> <ol> <li> <p>Open the command palette by pressing <code>Ctrl+Shift+P</code> (or <code>Cmd+Shift+P</code> on macOS).</p> </li> <li> <p>Type &ldquo;Preferences: Open Keyboard Shortcuts (JSON)&rdquo; and select it.</p>When writing Markdown in VS Code it’s useful to be able to insert the current date and time quickly. You can do this by setting up a keyboard shortcut1 that inserts the current date and time in a specific format.

To set up a date time shortcut in VS Code, follow these steps:

  1. Open the command palette by pressing Ctrl+Shift+P (or Cmd+Shift+P on macOS).

  2. Type “Preferences: Open Keyboard Shortcuts (JSON)” and select it.

  3. Add the following JSON snippet to your keybindings.json file

    },
{
    "key": "ctrl+d t",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND.000"
    }
}

  4. Save the file.

  5. Now, whenever you press Ctrl+d t (or your chosen key combination), it will insert the current date and time in the format YYYY-MM-DDTHH:MM:SS.000.

  1. https://mattferderer.com/create-a-snippet-or-shortcut-in-vs-code-to-insert-the-current-date-time ↩︎

]]>VS Code Keyboard Shortcuts/posts/1d1-keyboardshortcuts/Fri, 30 May 2025 17:52:00 +0000/posts/1d1-keyboardshortcuts/<p><a href="6-vscode.md">VS Code</a> stores its keyboard shortcuts in a JSON file. You can access this file by going to the command palette ([Ctrl|Cmd]+Shift+P) and typing &ldquo;Open Keyboard Shortcuts (JSON)&rdquo;.</p>VS Code stores its keyboard shortcuts in a JSON file. You can access this file by going to the command palette ([Ctrl|Cmd]+Shift+P) and typing “Open Keyboard Shortcuts (JSON)”.

]]>VS Code/posts/1d-vscode/Fri, 30 May 2025 17:51:00 +0000/posts/1d-vscode/<p>Visual Studio Code (VS Code)<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> is a free, open-source code editor developed by Microsoft. It is available for Windows, macOS, and Linux. VS Code is designed for building and debugging modern web and cloud applications. It includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.</p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p><a href="https://code.visualstudio.com/">VS Code</a>.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p> </li> </ol> </div>Visual Studio Code (VS Code)1 is a free, open-source code editor developed by Microsoft. It is available for Windows, macOS, and Linux. VS Code is designed for building and debugging modern web and cloud applications. It includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

  1. VS Code. ↩︎

]]>Hugo (Go) Static Site Generator/posts/1b-hugo/Wed, 29 Jan 2025 03:36:00 +0000/posts/1b-hugo/<p>Hugo<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> is a popular open-source static site generator written in Go. Known for its speed and flexibility. It specialises in generating static content making it a great choice for building content driven websites and blogs. In hugo pages are written in <a href="../../posts/1a-markdown/">Markdown</a>.</p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p><a href="https://gohugo.io/">Hugo Site</a>.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p> </li> </ol> </div>Hugo1 is a popular open-source static site generator written in Go. Known for its speed and flexibility. It specialises in generating static content making it a great choice for building content driven websites and blogs. In hugo pages are written in Markdown.

  1. Hugo Site. ↩︎

]]>Markdown/posts/1a-markdown/Wed, 29 Jan 2025 03:36:00 +0000/posts/1a-markdown/<p>Markdown is a lightweight markup language with plain text formatting syntax. Its design allows it to be converted to many output formats, but the original tool by the same name only supports HTML.</p><p>Markdown is a lightweight markup language with plain text formatting syntax. Its design allows it to be converted to many output formats, but the original tool by the same name only supports HTML.</p> Markdown Footnote ids/posts/1a1a-footnote-ids/Wed, 29 Jan 2025 03:36:00 +0000/posts/1a1a-footnote-ids/<p>Since large documents can have many footnotes it can be difficult to keep track of which ids have been used. To make it easier to come up with unique ids for every footnote in a single large document, I use a date and time format. For example, the footnote id <code>[^202505291403]</code> corresponds to May 29, 2025 at 14:03. It&rsquo;s unlikely I&rsquo;ll reference two things in the space of a minute, this ensures that each footnote id is unique and easy to reference.</p>Since large documents can have many footnotes it can be difficult to keep track of which ids have been used. To make it easier to come up with unique ids for every footnote in a single large document, I use a date and time format. For example, the footnote id [^202505291403] corresponds to May 29, 2025 at 14:03. It’s unlikely I’ll reference two things in the space of a minute, this ensures that each footnote id is unique and easy to reference.

]]>Markdown Footnotes/posts/1a1-markdown-footnotes/Wed, 29 Jan 2025 03:36:00 +0000/posts/1a1-markdown-footnotes/<p>Footnotes in <a href="1-markdown">markdown</a> are created using the following syntax:</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-markdown" data-lang="markdown"><span style="display:flex;"><span>This is a sentence with a footnote.[^1] </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>[^1]: This is the footnote text. </span></span></code></pre></div><p>The footnote is referenced by the caret symbol <code>^</code> followed by a number or identifier. The identifier can be anything, so long as it is unique within the document. The footnote text is defined at the end of the document, using the same identifier.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p><a href="https://stackoverflow.com/questions/52078829/automatic-number-of-footnotes">StackOverflow: Automatic number of footnotes?</a>, Referenced on 2025-05-29.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>Footnotes in markdown are created using the following syntax:

This is a sentence with a footnote.[^1]

[^1]: This is the footnote text.

The footnote is referenced by the caret symbol ^ followed by a number or identifier. The identifier can be anything, so long as it is unique within the document. The footnote text is defined at the end of the document, using the same identifier.1

  1. StackOverflow: Automatic number of footnotes?, Referenced on 2025-05-29. ↩︎

]]>Pandoc/posts/1c-pandoc/Wed, 29 Jan 2025 03:36:00 +0000/posts/1c-pandoc/<p>Pandoc is a command line tool for converting document formats.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> It supports converting to and from a huge range of formats.</p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p><a href="https://pandoc.org/">Pandoc Docs</a>.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p> </li> </ol> </div>Pandoc is a command line tool for converting document formats.1 It supports converting to and from a huge range of formats.

  1. Pandoc Docs. ↩︎

]]>Pandoc Numbering Sections/posts/1c1-numbering-sections/Wed, 29 Jan 2025 03:36:00 +0000/posts/1c1-numbering-sections/<p>When exporting from markdown to HTML you may want to switch from using H1s to H2s for the content since HTML should not include more than a single H1. To achieve this you can pass the option <code>--shift-headaing-level-by=1</code> to <a href="../../posts/1c-pandoc/">Pandoc</a>. This will shift all headings down by one level, making H2s into H3s, H3s into H4s, and so on.</p>When exporting from markdown to HTML you may want to switch from using H1s to H2s for the content since HTML should not include more than a single H1. To achieve this you can pass the option --shift-headaing-level-by=1 to Pandoc. This will shift all headings down by one level, making H2s into H3s, H3s into H4s, and so on.

]]>