プラグイン

SyntaxHighlighterの設定と使い方は?wordpressにソースコードを表示!

26bc9a50e150c1b7cc72b2502119757c

ブログないでソースコードを表示させたいときに、貼り付けても表示されません。

例えば以下のコード(これは画像です!)

5f6f3ddf08d538efe6a9a253b267ed12

このコードをここの記事内に貼り付けて、プレビュー画面で確認しても真っ白のままです。

しかしSyntaxHighlighterというプラグインを使うことによって、簡単に表示させることができるようになります。

SyntaxHighlighterの設定と使い方


まずは、ワードプレスにプラグインを導入する方法のような流れで、「SyntaxHighlighter」と検索をかけてインストール、有効化をしましょう。
                  

設定」→ 「SyntaxHighlighter」と進みます。

a3717f35bb200eaf20e72f6002d663fa

                  

02fe8b9c84b4ec4d6cd49ab9d18b96f7

特に設定の必要のない人は何も触る必要はありませんが、コードに番号を入れたり、自動リンクを挿入したい場合はチェックマークを入れたり外したりしましょう。

※現在の設定の状態は下のプレビューで確認することができるので、一度「変更を保存」してから確認してみましょう。
                  

それでは、実際にやってみましょう。

と<span class="box-yellow">

の間に表示させたいコードを入力します。

※[]は半角なので注意しましょう。

05d057619d0116f47d930d5410ba3f64

                  

そうすると、このような表示できるようになったことがわかるかと思います。

3a56501b6d7a432e81ea3b0ffd4a3333

テンプレートによっては表示できないことがある?


どうやらテンプレートの関係で、SyntaxHighlighterが正しく反映されない場合があるようですね。

僕の場合、賢威では「行番号を表示する」という設定をしても表示されませんでした。

そんな方はプラグインを使わずワードプレスなどブログでHTMLタグを表示させる方法を参考に、別のプラグインを使用するか、プラグインを使わず表示させる方法を試してみてください。

『無料PDF配布』&『無料メール講座』

5年以上ブログで稼ぎ続けている経験を元に、「月収1万円を稼ぐことに特化したブログノウハウ」を作ってみました。お気軽にダウンロードしてみてください。
ダウンロードしてみる
月収10万円以上稼ぎたい人への「メール講座」もやってます。

COMMENT

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