【SWELL】コーダー必見！ソースコードをブログで紹介する方法

ブログに、見やすくてコピペできるサンプルのソースコードを載せたい。

今回は、ブログ運営する際に役立つ「見やすくてキレイなソースコード」を載せる方法をご紹介します。

  実際の見え方の例

 <nav>
　　　　<ul>
　　　　　　　<li>
　　　　　　　　　　<a href="#">会社概要</a>
            </li>
　　　　　　　<li>
                <a href="#">よくある質問</a>
            </li>
            <li>
                <a href="#">お問い合わせ</a>
            </li>
      </ul>
</nav>

ブログにソースコードを載せる方法

ブログ記事にソースコードを載せるためには、WordPressのプラグイン「Highlighting Code Block」を使用します。

「Highlighting Code Block」を使用することで、簡単に見やすくてキレイなソースコードを表示することが可能です。

Highlighting Code Blockの特徴

Highlighting Code Blockの特徴は以下のとおりです。

順番に解説していきます。

国内No.1シェア【SWELL】とHighlighting Code Blockの相性

WordPressの国内No.1シェア【SWELL】とプラグイン「Highlighting Code Block」は同じ開発者が作っているため、相性は抜群です。

ちなみに開発者の了さん（ @ddryo_loos）は、「SEO SIMPLE PACK」や「Useful Blocks」、「Pochipp」など、多くの有名プラグイン開発にも携わっています！

対応可能な言語

対応可能な言語はデフォルトで17種類です。

• HTML
• CSS
• SCSS
• JavaScript
• TypeScript
• PHP
• Ruby
• Python
• Swift
• C
• C#
• C++
• Objective-C
• SQL
• JSON
• Bash
• Git

上記以外の言語を使用したい場合は、「独自prism.js」の設定と併用することで可能になります。

カラーリングは「Light」と「Dark」の２種類

ブログの雰囲気に合わせて、カラーリングを変更できます。

「Light」と「Dark」は以下の見え方です。

  Light

  Dark

プラグイン：Highlighting Code Blockの使い方

Highlighting Code Blockをインストールして、有効化します。

Highlighting Code Blockをインストールする方法

STEP

プラグイン：Highlighting Code Blockを新規追加

WordPressの管理画面からプラグインの「新規追加」をクリック、Highlighting Code Blockを入力します。

STEP

Highlighting Code Blockを有効化

「今すぐインストール」をクリックしたら、「有効化」します。

準備完了です◎

Highlighting Code Blockの設定方法

では、Highlighting Code Blockを設定していきましょう。

Highlighting Code Blockは、設定しなくてもデフォルトのまま使用できます。

以下の設定を変更したい方のみご対応ください。

• コードブロックに言語を表示/非表示（デフォルト：表示）
• コードブロックに行数を表示/非表示（デフォルト：表示）
• コードブロックにコピーボタンを表示する（デフォルト：表示）
• フォントスムージングをオン/オフ（デフォルト：オフ）
• コードカラーリング*（フロント側/エディター側）（デフォルト：Light）
• フォントサイズ（PC・SP）（デフォルト：PC14px/SP13px）
• コードのフォントファミリー（デフォルト：Menlo, Consolas, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;）

*コードカラーリングのフロント側・エディター側とは、フロント側が公開された記事の見え方、エディター側が編集画面での見え方のことです。

Highlighting Code Blockの基本の設定方法は以下のとおりです。

STEP

管理画面の「設定」から[HCB設定]をクリック。

STEP

設定を変更

必要に応じて、設定項目を変更してください。

高度な設定もこちらから設定可能です。

Highlighting Code Blockをブログで使う方法

実際に「Highlighting Code Block」をブログ記事に使ってみましょう！

ブロックエディターを使用していますが、旧エディターでも使用可能です◎

STEP

「Highlighting Code Block」ブロックを選択

投稿編集画面でブロック追加。

ブロック（テキスト）から「Highlighting Code Block」を選択します。

STEP

必要なテキストを入力・選択

• Lang Select（使用言語の選択）
• ファイル名の記載
• data-line属性値

data-line属性値について

data-line属性値とは、強調したい行の背景色を変更する機能です。

<nav>
　　　<ul>
　　　　　　<li>
　　　　　　　　　<a href="#">会社概要</a>
          </li>
　　　　　　<li>
               <a href="#">よくある質問</a>
          </li>
      </ul>
</nav>

例えば、上記のように、４行目をハイライト表示したい場合、右下の枠に4と入力します。

複数行のハイライト表示の方法

１行目〜３行目までをハイライト表示したい場合は、1-3

<ul>
    <li>
　　　　　<a href="#">会社概要</a>
    </li>
　　 <li>
        <a href="#">よくある質問</a>
    </li>
</ul>

1行目と3行目をハイライト表示したい場合は、1,3

<ul>
    <li>
　　　　　<a href="#">会社概要</a>
    </li>
　　 <li>
        <a href="#">よくある質問</a>
    </li>
</ul>

と、右下の枠「data-line属性値」に入力します。

お疲れさまでした…！見やすくて、コピーも簡単なソースコードの表示ができましたね♩

まとめ

今回は「ブログで見やすいソースコードを紹介したい…！」という方に向けて、プラグイン「Highlighting Code Block」を紹介しました。

「Highlighting Code Block」を使用するだけで、見やすくて使いやすいソースコードを埋め込むことができます。

すぐは使用しないかな…という方も入れておいて損はないですよ◎

あわせて読みたい

CocoonからSWELLに移行する手順と注意点｜乗り換えた正直レビュー【比較付き】乗り換えを実際に行ったのは、CocoonからSWELLへ移行した初代運営者のまめ。本記事はその記録を、現編集部が最新情報…

あわせて読みたい

【SWELL】ブログまるっと好きなフォントに変更する方法フォントってサイトの印象を決める大切な要素ですよね。 今回はSWELLユーザーの私が、サイト全体のフォントを変える方法を…

あわせて読みたい

【SWELL】ページ内リンクの方法！気になる見出しへすぐ飛べる【SWELL】のページ内リンクはとっても簡単◎詳しい知識がなくても３ステップです。 ページ内リンクとは？ ページ内リンク…

あわせて読みたい

【SWELL】投稿一覧に「日・週・月・全」のアクセス数を表示する方法筆者も以前コクーンを使用していて、アクセス数の伸び具合はWordPressで確認していました。 SWELLは総PV数は表…