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

Pocket

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

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

5f6f3ddf08d538efe6a9a253b267ed12

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

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


SyntaxHighlighterの設定と使い方


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

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

a3717f35bb200eaf20e72f6002d663fa
                  

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

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

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

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

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

05d057619d0116f47d930d5410ba3f64

                  

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

3a56501b6d7a432e81ea3b0ffd4a3333


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


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

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

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

コメントを残す

サブコンテンツ