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

2013年03月01日 #ablogcms #カスタマイズ

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 のサイトのようにソースを折り返ししたかったり、デザインを変更したかったりで、その方法については以下のリンクをご覧下さい。

著者写真
この記事を書いた人
山本 一道 / 有限会社アップルップル 代表

名古屋のWeb制作会社 (有)アップルップル代表。HTMLファーストな国産CMS「a-blog cms」開発・販売・サポート / 名古屋のWeb制作者コミュニティ「WCAN」主催 / コワーキングスペース「ベースキャンプ名古屋」運営。Web制作の現場をより良くするための活動をしています。

@kazumich

関連記事

この記事のハッシュタグ #ablogcms#カスタマイズ から関連する記事を表示しています。