waka8*stakes

〜馬絵+林檎+Wordpress〜

SyntaxHilighterプラグインをやめて素で導入

no-thumbnail

記事に晒したソースやコードの表示がおかしい!WP Syntaxhighlighterプラグインを使ってるのですが色がついてないのです。このブログの大きな変化といえばWP to Twitterプラグインを導入したのでそれが原因だと思い、いったん無効化してみました。そしたら元のようにコードが綺麗に色分けされました。

WP SyntaxhighlighterとWP to Twitterはどうも相性がよろしくないみたいです。Syntaxhighligterぐらいならプラグインなしでいけると思ったのでいわゆる『HTMLサイト』と同じように手動で置く事にしました。

WordPressに導入する為の準備

  1. SyntaxHighlighter3.0.83を配布元からダウンロード
  2. zipファイルを解凍
  3. 使うのは中のscriptsフォルダとstylesフォルダ
  4. アップロードする前にscriptsフォルダ内の使う予定がない『shBrush言語名.js』ファイルを削除する
  5. 使用するテーマのディレクトリに上記をアップロード

基本的な使い方

header.phpのheadタグ内に(プラグインではないのでwp_head()より下でも構わない)記述

私は(X)HTML・CSS・PHP・JavaScript・Plaintextぐらいしか使う予定はないので

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/shCore.js"></script>
        <!--必要な言語別の対応ブラシファイルを読み込む-->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/shBrushJScript.js"></script><!--JavaScript-->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/shBrushPhp.js"></script><!--PHP-->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/shBrushPlain.js"></script><!--Plaintext-->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/shBrushXml.js"></script><!--(X)HTML-->
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/shBrushCss.js"></script><!--CSS-->
<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/shCoreDefault.css"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script>

記事内にソースコードを書く時は<pre>〜<pre>で囲み、class="brush: 言語名"
属性を付けます。

  • HTML,XHTML,XML→html,xhtml,xml
  • JavaScript→js,jscript,javascript
  • CSS→css
  • PHP→php
  • Plain Text→plain,text
  • その他の言語は本家を参照(表のBrush aliasesを参照)

以上で難なくソースコードを『魅せる』ことができました。