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タグの定義を行います。



関連記事

この記事のハッシュタグ から関連する記事を表示しています。

Flex Slider をa-blog cmsのユニットグループで利用する

スクロール時に画像の読み込みを開始する Lazyload

画像拡大時のjsをhighslideからprettyPhotoに

company3で試すjs-post_inculde機能

a-blog cms の勉強会開催を日本各地で開催したい

データの入力画面のサンプル

a-blog cms の CSVインポート機能は私が思ってたより凄かったことを紹介

最新記事

アーカイブ

ハッシュタグ