ホーム > カテゴリ > インターネット・ブログ >

Google-Code-PrettifyをSyntax Highlighterのようなデザインにする

Google-Code-Prettifyはプログラムなどのソースコードを自動でハイライト表示させるJavascriptライブラリです。但し、デザインは同様のライブラリ「Syntax Highlighter」を気に入ってるいる方が多いかと思います。そこでGoogle-Code-PrettifyをSyntax Highlighterのようなデザインにするサンプルです。

Google-Code-Prettifyは転送量が0バイト

Google-Code-PrettifyはSyntax Highlighterとは違い自分の環境へそのJSライブラリのファイルを置かずにHTMLのscriptタグで「https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js」を指定するだけでJSファイルを読み込むことが出来ます。これは自分のサーバーの転送量を軽減できるかと思います。

サンプル(CSS)

Syntax Highlighterのようなデザインにするサンプルとなります。

.com { color: #080; }  /* コメント */
.str { color: #800  }  /* 文字列   */
.typ { color: #000; }  /* タイプ、クラス名等  */
.kwd { color: #0068b7; font-weight:bold; } /* キーワード */

pre.prettyprint {
  background-color: #fff;
  font-family:"メイリオ", Meiryo;
  font-size:14px;
  overflow:auto;    
}    

ol.linenums{
  padding-left: 36px !important;
}

ol.linenums li {
  list-style: decimal outside;
  border-left: solid 3px #6CE26C;
  padding-left: 10px;
  background-color: #fff;
}

細かい所は各自、修正して下さい。尚、フォントは「等幅フォント」を指定すればソースコードがぴっちりなります。また、「ソースをコピー」を追加したい場合はgoogle-code-prettifyのソースコピー問題の対応方法をご覧下さい。





関連記事



公開日:2015年01月07日
記事NO:00082


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名:プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ~

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律