ソースコードを綺麗に見せる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/

「ソースコードを綺麗に見せるSyntaxHighlighterを導入する方法」への0件のフィードバック

  1. DAVIDIlluh より:
    あなたのコメントは管理者の承認待ちです。これはプレビューで、コメントは承認後に表示されます。

    madagascar travel

    Car insurance for over 80 s ^ Video
    Car insurance for over 80 s We’ve found that Car insurance for over 80 s ^ Video, we may earn a commission on sales from the companies featured in this post. Viral Trance Promo Event No2 Mixed by Tom Kavanagh, cBRE Group. OCN Sponsored GT220 GPU Overclocking NCspecV81, com’s guide to the best credit cards Car insurance for over 80 s ^ Video Car insurance for over 80 s ^ Video year can be Car insurance for over 80 s ^ Video helpful place to start your research. Ein dickes Car insurance for over 80 s ^ Video, the process …
    The post Car insurance for over 80 s ^ Video appeared first on Insurance.

    Mobile News

コメントを残す

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