トップ  >  その他  >  google-code-prettifyを使ってサイト上のソースコードを装飾

google-code-prettifyを使ってサイト上のソースコードを装飾


いわゆるソースコードを JavaScript で色付けして見やすくするということ

当サイトは XOOPS2JP でつくられており、この「features」は pico モジュールを使用しています。
このpico上のソースコードを書くことがあるのではと思い、今回 google-code-prettify を導入してみました。

google-code-prettifyをダウンロード、解凍後、
prettify.js、prettify.css の2ファイルをサイトへアップロード
pico の一般設定の「コンテンツ共通HTMLヘッダ」へ以下を記入
<script src="/common/pretty/prettify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/common/pretty/prettify.css" />


ソースコードを装飾したい部分を pico のコンテンツ本文で以下のように記述
<pre class="prettyprint">
ソースコード
</pre>


コンテンツ本文最後に以下を記述 JavaScript を実行させます。
サンプルでは body タグの onload に入れてありましたが、ここでは使うときだけ実行させるように本文最後に記入しました(HTMLヘッダーではタイミング的に早すぎるのでここにしました)。
<script>prettyPrint();</script>

本文フィルター
チェックオン:顔文字変換、BBCode変換、自動改行

ソースコード内の「<」は「&lt;」(便宜上全角表記)にエスケープした状態で記入してあります。

HTML, PHP, JavaScriptなどを自動で識別しているようです。

前
サイトのタイトル画像
カテゴリートップ
その他

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2017 keibunsya all right reserved.