hugoで上付き・下付き文字が入力できない

2022-02-21 · Tomoki Ikegami

"マークダウンでhtmlのタグを使えるようにするには"

現状

記事のファイル「index.md」には、下のような感じで上付き文字を含んだ文章を書いているのですが、出力結果がおかしくなってしまいます。

記事ファイル「index.md」の中身

x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup> 

出力結果

 hugoのserverコマンドで確認した出力結果がこちらです。

出力結果(現状) 正しい結果(理想)
正しくない出力結果(現状)
正しくない出力結果(現状)

解決方法

 調べてみると、「config.json」に数行付け足すことで解決出来ることが分かりました。configファイルの形式が.jsonの場合は、以下の数行を付け足します。

「config.json」に付け足す文(カッコの数やカンマの位置に注意)

{
   "markup": {
      "goldmark": {
         "renderer": {
            "unsafe": true
         }
      }
   }
}

.json形式でない場合(.yamlや.toml)は書き方が少し変わりますが、やることは全く同じです。書き足す文はこちらのページに記載されています。記載されている形式は「.yaml」,「.toml」,「.json」の三種類です。

実際に変更する前と変更した後のファイルは下のような感じです。細かい構成はテーマによって違うと思います。

追加する場所はどこでも良いのですが、今回は"disableKinds"の下側に追加してみました。カッコの数やカンマの位置に注意して書き足してください。

変更前の「config.json」

{
  "baseURL": "https://tomokiikegami.github.io/Happy_RC.github.io/",
  "languageCode": "ja",
  "permalinks": {
    "post": "/:year/:month/:day/"
 },
  "title": "Happy RC Blog !",
  "theme": "redgood",
  "disableKinds": "taxonomyTerm",
  "params": {
    "author": "Tomoki Ikegami",
    "description": "ラジコンが楽しくなるような工作やレポートを掲載したいと思います!ラジコン以外にもやってみて苦労したことや、面白かったことについても記録していく予定です!",
    "theme": {
      "dateFormat": "2006-01-02",
      "copyrightInFooter": false,
      "footerText": "I hope to enjoy your RC Life",
      "pinnedPosts": false
    },
    "about": {
      "profileImage": "images/profile.jpg",
      "narrative": "ラジコンが楽しくなるような工作やレポートを掲載したいと思います!ラジコン以外にもやってみて苦労したことや、面白かったことについても記録していく予定です!"
    },
    "social": {
    }
  }
}

変更後の「config.json」

{
  "baseURL": "https://tomokiikegami.github.io/Happy_RC.github.io/",
  "languageCode": "ja",
  "permalinks": {
    "post": "/:year/:month/:day/"
 },
  "title": "Happy RC Blog !",
  "theme": "redgood",
  "disableKinds": "taxonomyTerm",
  "markup": {                      
    "goldmark": {                  
       "renderer": {               
          "unsafe": true           
       }                           
    }                                                          
 },                                
  "params": {
    "author": "Tomoki Ikegami",
    "description": "ラジコンが楽しくなるような工作やレポートを掲載したいと思います!ラジコン以外にもやってみて苦労したことや、面白かったことについても記録していく予定です!",
    "theme": {
      "dateFormat": "2006-01-02",
      "copyrightInFooter": false,
      "footerText": "I hope to enjoy your RC Life",
      "pinnedPosts": false
    },
    "about": {
      "profileImage": "images/profile.jpg",
      "narrative": "ラジコンが楽しくなるような工作やレポートを掲載したいと思います!ラジコン以外にもやってみて苦労したことや、面白かったことについても記録していく予定です!"
    },
    "social": {
    }
  }
}

修正後の出力結果

「config.json」を修正して出力したら、上付き文字が表示できるようになりました!

x2 + y2 = r2 (円の方程式)

参考文献

  1. まくまくHugo/Goノート「Markdown ファイルに記述した HTML コードが削除されてしまう」、(https://maku77.github.io/hugo/misc/include-html.html)
  2. Hugo「Now CommonMark Compliant!」、(https://gohugo.io/news/0.60.0-relnotes/)