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機能

JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ

Chat GPT が書く a-blog cms の紹介ブログ記事

最新記事

カテゴリー

アーカイブ

ハッシュタグ