[WordPress] ブログにソースコードを書くのに便利なプラグイン – “Highlighting Code Block”

gitcommand

ブログで技術メモを残したいとき、コードを掲載することがありますよね。

よく技術ブログでみかけるこういうやつです。

ReactMount.render(
  component,
  document.getElementById('container')
);


コードブロック” “シンタックスハイライト“と言うみたいです。

自分もWordPressで使ってみたいなぁ、と色々調べていたら

Highlighting Code Block」 プラグインが便利でした!

Highlighting Code Blockを使う3ステップ

1. Highlighting Code Blockの設定方法

2. 実際に記事の中でハイライトを使う方法

3. コードカラー(Light / Dark)変更す方法


1. Highlighting Code Blockの設定方法

WordPressのメニューアイコンから

プラグイン設定方法

1.「プラグイン」を選び

2.「新規追加」ボタンを押して

3.「Highlighting Code Block」で検索します。

検索結果から

1.「インストール」ボタンを押し

2.「有効化」ボタンを押して、プラグインを有効化します。

これでシンタックスハイライトを使う準備ができました。

2. 実際に記事の中でハイライトを使う方法

記事にソースコードを書いて、フォーマットを選択する時に
「Highlighting Code Block」を選びます。

Highlighting Code Block Plugin

こんな感じで、コードハイライトされました。見やすくていいですね!

import React from 'react';
import ReactDOM from 'react-dom';

/* Componet */
class MyComponent extends React.Component {
    render(){
        return (
            <div>
                <h1>Hello! World.</h1>
                <p>このページはテストページです。</p>
            </div>
        )
    }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('main') 
);

使用できる言語も多く、以下が標準でサポートされています。

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

3. コードカラー(Light / Dark)変更す方法

このようにコードカラーを、LightとDarkを選ぶことができます。

コードカラー Light/Dark

WordPressメニューから

設定方法

1.「設定」アイコンを押す

2. 「Code Block」を選択

3. Light/Darkの表示したい方を選択する

これでブログ全体のシンタックハイライトの、お好みのコードカラーを変更することができます。

まとめ

他にもシンタックスハイライトのプラグインはいくつかありますが、シンプルで使いやすいなぁ、と言う印象でした。

[参考情報]

手順通りに操作するだけで、さまざまな状況に応じたWebサイトが作れます。


・ECサイト
・アフィリエイトサイト(SEO対策)
・ショッピングサイト(ショッピングカート機能)
・個人サイト(完全無料)

「Webサイトを作ってみたい」と漠然と思っている人から、
「一度WordPressを触ってみたけど挫折した」という人まで。

コメントを残す

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

CAPTCHA