hugo-book テーマに dracula スタイルのシンタックスハイライトを導入する

2024/03/17 09:00:00

Program

Hugo, Dracula, Css

前提 #

hugo の開発環境構築は以下を参考にすること https://blog.oya3.net/posts/2023/08/15/first/
hugo-book テーマが適用済みであること

dracula.css 作成 #

# 保存先作成
$ mkdir themes/hugo-book/static/css
# dracula スタイル css 作成
$ hugo gen chromastyles --style=dracula > themes/hugo-book/static/css/dracula.css

config.toml に dracula スタイル設定追記 #

$ emacs config.toml

...
[markup.highlight]  <--- 追記
  noClasses = false
  style = "dracula"

マークダウンscss修正(_markdown.scss) #

$ emacs themes/hugo-book/assets/_markdown.scss

...
  pre {
    padding: $padding-16;
    background: var(--gray-100);
    background-color: #282a36; /* Dracula背景色 */  <--- ここ追記
    border-radius: $border-radius;
    overflow-x: auto;
...

dracula.css を参照する link タグ追加 #

$ emacs themes/hugo-book/layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ default .Site.Language.Lang .Site.LanguageCode  }}" dir="{{ default "ltr" .Site.Language.LanguageDirection }}">
  <head>
    {{ if .Data.Singular }}
    <meta name="robots" content="noindex">
    {{ end }}
    {{ with .Params.relcanonical }}
    <link rel="canonical" href="{{ . | relLangURL }}" itemprop="url" />
    {{ else -}}
    <link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
    {{ end -}}
    {{ partial "docs/html-head" . }}
    {{ partial "docs/inject/head" . }}
    <link rel="stylesheet" href="/css/dracula.css">  <--- 追記
  </head>
...