コンテンツの読み込みに時間がかかっています

a-blog cms で google-code-prettify を利用する方法

bootstrap のシンタックスハイライトいいなって思って、何を使っているのかを調べてみたら「google-code-prettify」というものが使われている事が分かったので設定してみた。その方法を書き残しておきます。

ダウンロードした google-code-prettify のフォルダをそのまま /themes/blog2013/js の中にアップロードし、<head>タグの中に以下の記述を追加し必要なファイルを置くべきところに置くようにする。

<script src="/js/google-code-prettify/prettify.js"></script>
<link rel="stylesheet" href="/js/google-code-prettify/prettify.css">
<script type="text/javascript">
$(function () {
  $("pre").addClass("prettyprint linenums");
  prettyPrint();
});
</script>

addClass("prettyprint") だけだと、行番号無しになります。また、今使っているテーマはスマホの時には幅が細くなるので bootstrap のサイトのようにソースを折り返ししたかったり、デザインを変更したかったりで、その方法については以下のリンクをご覧下さい。


関連記事

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

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ

a-blog cms のユーザーアイコンに Gravatar を反映するカスタマイズ

できるだけ簡単に子ブログにコンフィグセットを設定する方法を考える

コンフィグセットを利用していない時にコンフィグセット管理を表示させないカスタマイズを考えてみる

編集者権限でバナーモジュールをフロント側で編集できるような UI を使えるような実装を考える