WordPress記事にcssコードを表示させるプラグインSyntaxHighlighterが便利だ!

こんにちは、ユウトです。

今回は、WordPressの記事に、cssのソースコードを綺麗に表示させるプラグイン「SyntaxHighlighter」の導入方法と使い方について、備忘録のためにまとめておきます。

記事でソースコードを紹介するならSyntaxHighlighterが便利

ワードプレスの記事でソースコードを紹介する場合、特殊文字が含まれているので、そのまま記述するとうまく表示できません。しかし、SyntaxHighlighterというプラグインを使うと、以下のようにcssコードを綺麗に見せることができます。

ソースコード

では、SyntaxHighlighterのインストール方法についてまとめておきます。

SyntaxHighlighterのインストール方法

まずは、ワードプレスの管理画面から「プラグイン」、「新規追加」へと進み、以下のようにSyntaxHighlighterをインストールします。

SyntaxHighlighter Evolved

有効化

これで、インストールは完了です。

SyntaxHighlighterの使い方

SyntaxHighlighterの使い方はいたって簡単であり、cssソースコードを表示させたい場合は、ワードプレスのテキストモードで、”css”と”/css”の間にコードを記述するだけで良いのです。

【記述】

記述例

【表示】

上のようにソースコードを記述して記事を投稿すると、以下のように表示されます。

表示例

便利なツールなので、是非使ってみてください。



2 Responses to “WordPress記事にcssコードを表示させるプラグインSyntaxHighlighterが便利だ!”

  1. きょろ より:

    こんにちわ
    ランキングからきました。
    便利なプラグインがありますね。
    わたしのブログにもいれてみたいとおもいます。

    • ゆうと より:

      きょろさん

      こんにちは、ユウトです。
      コメントありがとうございます。
      私も最近知ったのですが、便利なので使ってみてください!

      では~

コメントを残す

サブコンテンツ

このページの先頭へ