ワードプレスでホームページの作り方やプログラミング学習のサイトを作りたい。そんな場合に便利なプラグインをご紹介します。
目次
ワードプレスでソースコード表示するには？
ワードプレスの記事内にソースコードを記載しても、思った通りに表示されなかったり、なんだか分かりにくく感じてしまったりします。そんな時におすすめなプラグインが「SyntaxHighlighter Evolved」です。
SyntaxHighlighter Evolvedなら、簡単な操作で記事内にコードを表示させることが出来ます。それも、表示されたコードはコードエディタで表示するときのように、構文強調表示に対応していて読みやすくなっています。
SyntaxHighlighter Evolvedのインストール
ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「SyntaxHighlighter Evolved」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。
これでSyntaxHighlighter Evolvedのインストールは完了です。
SyntaxHighlighter Evolvedの使い方
次は実際にSyntaxHighlighter Evolvedを使ってコードを表示させてみましょう。
記事の中にPHPというプログラミング言語のコードを記載しました。
このままプレビューをすると、ソースコードの部分がごっそり抜けた状態で表示されてしまいます。
そこで、今度はSyntaxHighlighter Evolvedの機能を使ってコードを表示させてみます。コードの部分を[言語][/言語]で囲みます。
この状態で保存をし、表示をするとPHPのコードも構文がきれいに装飾された状態で表示されています。これならプログラミング初心者の人も読みやすいですね。
今回はPHPでしたが、htmlやCSSなど様々な言語がサポートされています。
さらに詳しい詳しい使い方
SyntaxHighlighter Evolvedでは、特定の行をハイライトをハイライトしたり、デフォルトでコードを表示する部分を閉じた状態にするなどの表示方法のカスタマイズをすることができます。詳しくは、ダッシュボードの設定-SyntaxHighlighterで表示されるページの下方に確認できます。
ワードプレスの記事にソースコードを乗せる機会がある場合は、簡単にきれいに表示ができる「SyntaxHighlighter Evolved」を使ってみてください。
