Snippet - jQuery Syntax Highlighter を使えるようにしてみました

jQuery Syntax Highlighter Snippeta-blog cms で使えるようにしてみました。

テキストユニットの<pre>タグを拡張し、コンフィグの設定に pre.html を追加する事で、<pre class="html">が使えるようになり、Syntax Highlighter が使えるようになります。少し、標準のCSSのままで利用すると、blog.css の設定と被っておかしくなってたり、デフォルトのままの指定だとスタイルがランダムになってたりしますが、簡単に使えそうなのでオススメしておきます。他にも同様の JavaScript として

のようなものもあります。


テンプレートに追加するコード


<link rel="stylesheet" type="text/css" href="/css/jquery.snippet.css" />
<script type="text/javascript" src="/js/jquery.snippet.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("pre.html").snippet("html");
	$("pre.css").snippet("css");
	$("pre.js").snippet("javascript");
	$("pre.php").snippet("php");
});
</script>

コンフィグの設定

カスタマイズ管理 > コンフィグ > エントリー > 編集設定 > テキストタグセレクト に以下の画像のような設定を行います。ここでは、テキストユニットの htmlタグの定義を行います。



コメント

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

エントリーリスト

カテゴリーリスト

タグクラウド

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。