【WordPress】記事の中でソースコードを見やすく表示させる

概要

  • 「SyntaxHighlighter Evolved」というプラグインを入れる。
  • インライン要素としてハイライトするならテーマを自分で拡張する

環境

WordPress 5.1
エディタ:Gutenberg
テーマ:Twenty Eleven

※他のテーマだとこんなことする必要はないかもしれない

詳細

ソースコードをハイライトする

「SyntaxHighlighter Evolved」というプラグインを導入。

新規投稿画面(Gutenberg)で、ブロックを追加するときに「Syntaxhighlight Code」というブロックを追加して、その中にコードを書いていく。

インライン要素をハイライトする

WordPressの管理画面→「外観」→「カスタマイズ」→「追加CSS」に以下を記述。

code {
    padding: 2px;
    border-radius: 2px;
    color: #23282d;
    background: #f3f4f5;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です