ソースコードを綺麗に見せるSyntaxHighlighterを導入する方法

このサイトでは色んなソースコードを扱う予定です。
WordPressやJavaScript、HTML、CSS、PHP、サーバーなどを扱います。
今回紹介するのはソースコードを綺麗に見せようというのが目的です。
調べたところSyntaxHighlighterというツールを見つけたのでご紹介いたします。

SyntaxHighlighterのページはこちらから

まずはダウンロードをしましょう
現在(2016/06/06)の最新バージョンは3.0.83です。

SyntaxHighlighterのダウンロードページはこちら

SyntaxHighlighter

zipファイルがダウンロードできたと思いますのでまずは解凍しましょう。
FFFTPで現在使っているテーマフォルダに解凍したフォルダーごとアップロードしてください。
WordPress4.5.2では初期テーマは 「Twenty Sixteen」になっております。
(WordPressの展開先)/wp-content/themes/(使用しているテーマ)
今回このサーバーでの解凍ディレクトリ先はこちらになります
/home/miki-sin/www/world/wp-content/themes/twentysixteen

FFFTP

Twenty SixteenでSyntaxHighlighterを使うときにheader.phpに追加する部分です。
今回はシェルやCSS、JavaScript、PHP、HTMLに対応するコードになります。
header.phpを一度手元にダウンロードして下記のコードに書き換えてアップロードしてください。
灰色の部分が追記部分になります。

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php endif; ?>
	<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/styles/shCore.css" />
	<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/styles/shThemeDefault.css" />
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/scripts/shCore.js"></script><!-- 必須 -->
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/syntaxhighlighter_3.0.83/scripts/shBrushPhp.js"></script>
	<script type="text/javascript">SyntaxHighlighter.all();</script><!-- 必須 -->
	<style>
		/* Twenty SixteenのCSSで行数が表示されないための対処 */
		.syntaxhighlighter table{
			table-layout: auto;
		}
	</style>
	<?php wp_head(); ?>
</head>

<?php blginfo(‘template_url’); ?>こちらは現在使用しているテーマのurlを返すWordPress関数になります。
他の言語を使う場合は対応するjsを呼び出して使ってください。

基本的な使用方法は

<pre class="brush: html;">
	ソースコードをここに記入(htmlエンコードをすること)
	例
	<html>
	<head>
	</head>
	<body>
	</body>
	</html>
</pre>

これでhtmlのソースコードを書くと自動的に装飾してくれます。
言語の設定は<pre class=”brush: html;”>の部分のbrushのあとのhtmlをphpやCSSなど言語に書き換えるとその言語にあわせた装飾にかわります。
オプションとかありますがまた後日記事にしてあげたいと思います。

参考サイト
NetyaSun様
http://www.netyasun.com/syntaxhighlighter/
All About様
http://allabout.co.jp/gm/gc/406309/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です