WordPress上のブログでインラインコードを装飾する

はじめに

当初、このブログはプログラミングをもとにして、運営していこうと思っていました。

ブログを書いたところ、コード例を見ると通常の文章とデザインが同じで、わかりづらいです。やっぱりコード例を書くならQiitaのような見た目がいいですよね。

WordPressの設定を変更

このようなHTMLタグを装飾することを前提にしています

<pre>
    <code>
        プログラミングのコード
    </code>
</pre>

はじめに外部のCSSを適用するため、headタグ内に記述します。

WordPressの場合はダッシュボードの「<>HTMLタグ設定」にある【head内】に記載します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css>

そのあと、これをbodyタグを閉じる前に入れます。HTML表示時にJavascriptを実行して、ハイライトを適用します。Scriptタグにより、Javascriptが実行できるようになります。

WordPressの場合はダッシュボードの「<>HTMLタグ設定」にある【bodyタグの終わり】に記載します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad(); // ハイライトを実行
</script>

下の設定を追加CSSに追加します。preタグの設定を変更します。Style.cssに追加または変更します。

WordPressの場合、ダッシュボードから、「テーマエディタ」からCSSエディタを起動して、追加します。

なお、ここでのテーマエディタはJINを使っています。

pre {
         margin: 1em 0; /* ブロック前後の余白を設定する */
         padding: 1em; /* ブロック内の余白を設定する */
         border-radius: 5px; /* 枠の淵を角丸とする */
         background: #25292f; /* 背景色を設定する */
         color: #fff; /* 文字色を設定する */
         white-space: pre-wrap; /* はみ出たときに次の行に折り返す */
}