【超簡単】賢威7で記事上にソースコードを載せる方法 /WordPress

SyntaxHighlighter Evolved

 

SyntaxHighlighter Evolvedは、記事の中でソースコードを綺麗に表示できるWordPressプラグインです。プラグインで動作するSyntax Highlighter(シンタックス・ハイライター)です。

 

クラシックエディタ・ブロックエディタの両方に対応しています。ブロックエディタを利用する場合は「Syntax Highlighter」のブロックを利用できます。

 

クラシックエディタを利用する場合は、専用のショートコードを利用してソースコードを記述します。

 

ブログの記事の中で、HTMLやプログラミングのソースコードを解説する機会が多い方は、このプラグインを活用すると役に立ちます。

 

 

 

 

はじめに

このプラグインが優れていること

  • プラグインで動作する「Syntax Highlighter」です。
  • 記事の中でアプリケーションのエディタのようにソースコードを綺麗に表示できる。
  • クラシックエディタを利用する場合は、専用のショートコードの中にソースコードを記述して利用します。
  • ブロックエディタを利用する場合は「Syntax Highlighter」のブロックを利用できる。New
  • エディタの外観を変更できるデザインスキンが複数あり、好きなデザインを選べる。
  • プラグインの管理画面が日本語化されているのでわかりやすい。

 

動作見本

下記は「SyntaxHighlighter Evolved Ver.3.x」が実際に動作する見本です。
記事にソースコードを綺麗に表示することができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
    <p><?php echo 'Hello World!'; ?></p>
    <p>この行をハイライトしています。</p>
    <div class="foobar">フッター</div>
    <p><a href="https://wordpress.org/">WordPress</a></p>
</body>
</html>

 

SyntaxHighlighter Evolvedの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

右上の検索バーに「SyntaxHighlighter Evolved」と入力して検索、「いますぐインストール」をクリックします。

インストールが完了したら「プラグインを有効化」をクリックしましょう。

これでSyntaxHighlighter Evolvedの導入が完了しました。

 

おすすめの記事