Intro

  • We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.

  • You can find any YML to TOML converters if necessary.

Override theme template

By Hugo’s Lookup Order, you can override any part of a theme that you want. The following is a quick example.

Let’s say you wish the list was different. All you have to do is copy the list template:

your-site/themes/papermod/layouts/_defaults/list.html

And paste it under your own layouts folder:

your-site/layouts/_defaults/list.html

Then you’re free to make any changes you want to the list. @@ -85,10 +85,10 @@ assets: apple_touch_icon: "/apple-touch-icon.png" safari_pinned_tab: "/safari-pinned-tab.svg"

Centering image in markdown

Add #center after image to center align an image

![name](path/to/image.png#center)
-

Using Hugo’s Syntax highlighter “chroma”

  1. Disable Highlight.js in site config.yml
params:
+

Using Hugo’s Syntax highlighter “chroma”

  1. Disable Highlight.js in site config.yml

    params:
     assets:
         disableHLJS: true
-
    1. Set hugo’s markdown styling in site config.yml
    markup:
+

  2. Set hugo’s markdown styling in site config.yml

    markup:
     highlight:
         # anchorLineNos: true
         codeFences: true
@@ -96,10 +96,12 @@ assets:
         lineNos: true
         # noClasses: false
         style: monokai
-
    1. If you want lineNos: true, the background won’t be proper.

    Add the following to assets/css/extended/custom.css

    .chroma {
+

  3. If you want lineNos: true, the background won’t be proper. +This will only work with noClasses: false or pygmentsUseClasses: true. +Read Generate Syntax Highlighter CSS

    Add the following to assets/css/extended/custom.css

    .chroma {
     background-color: unset;
 }
-

    More Info : Configure Markup - Highlight

    References