SyntaxHighlighter Evolved : ソースコードを美しく表示するプラグイン

2009-06-20 2016-07-10 プラグイン 12

いつかどこかのサイトで見たきれいなコード表示が忘れられず、「WordPress」「コード」「美しく表示」などのキーワードで検索してみると、ありました！　このブログは先日公開されたばかりの WordPress 2.8 を使っていますが、うまく動くかな？と試しに入れてみると、問題なく動作しました。

SyntaxHighlighter Evolved: ソースコードを美しく表示するプラグイン
配布元：SyntaxHighlighter Evolved 2.1.0

参考サイト：

使い方

配布元より、SyntaxHighlighter Evolved 2.1.0をダウンロードします。（syntaxhighlighter.zip）
解凍すると「syntaxhighlighter」というフォルダが展開されるので、フォルダごと wp-content/plugins にアップロードします。
「プラグイン」の画面で、「SyntaxHighlighter Evolved」を有効化します。（※「使用する」をクリック）
これで、 [指定言語] ソースコード [/指定言語] というようにくくると、指定言語に合った表示をしてくれます。

［php］PHPソースコード［/php］
［css］CSSソースコード［/css］
［js］Javascriptソースコード［/js］

※[]は全角で書いています。

扱えるソースコードはこの他にもたくさんあり、上記参考サイトでより詳しく説明されています。
また、ハイライトにしたり、自動改行させない指定などは、以下のように記述できます。

例）［php highlight=”3″］…
```
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<title><?php wp_title(); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
```

注意点

配布元のサイトにも記されていますが、このプラグインにはテーマの header.php に <?php wp_head(); ?>、footer.php に <?php wp_footer(); ?> が必要になります。入っていないと動きません。

コメントを残す