2023-05-03
当サイトは結局今回のGoogle Code Prettifyに落ち着きました。行番号がスムーズに表示でき、設置も楽でしたので。
1、CDN Hosted(ローカルに持たないで公式から直接ロードする)場合
HTML | googlecodeprettify_hosted.html | GitHub Source |
<html lang="ja"> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian&lang=css&lang=sql"></script> <style type="text/css"> .prettyprint ol.linenums > li { list-style-type: decimal; } pre { padding: 5px 5px 5px 0px; } </style> <title>ソースコードハイライトサンプル</title> </head> <body> <pre class="prettyprint linenums lang-cpp"> #include <stdio.h> #include <stdlib.h> #include <string.h> int main(void) { unsigned char buf[8192]; int len; fprintf(stdout, "---BEGIN DATA CONTENTS---\n"); while (1) { len = fread(buf, 1, sizeof(buf), stdin); if (len <= 0) { break; } fwrite(buf, len, 1, stdout); } fprintf(stdout, "---END DATA CONTENTS---\n"); return 0; } </pre> </body> </html>
出力結果はこちら(別ウインドウ)
・skin=sons-of-obsidianのところを、好みの見栄えのスタイルを選んで変更する。スタイルのデモは以下にある。
https://raw.githack.com/google/code-prettify/master/styles/index.html
選んだスタイルのファイル名は、
https://github.com/googlearchive/code-prettify/tree/master/styles
にあるので、差し替えればOK。
・デフォルトでサポートされていない言語は別途jsをロードする必要がある。上記例ではlang=css&lang=sqlをロードしている。どの言語だと別途jsが必要かは、
https://github.com/googlearchive/code-prettify/tree/master/src
にあり、ここにjsがある=別途指定が必要、ということになる。
・pre classにprettyprintを指定すれば、装飾が発動する。linenumsを指定すると行番号を表示する。
lang-で指定するターゲット言語の識別子は、
https://github.com/googlearchive/code-prettify#for-which-languages-does-it-work
を参照する。
行番号を表示する場合、スタイルシートで
.prettyprint ol.linenums > li { list-style-type: decimal; }
とすれば、1行ごとに番号が振られる。(指定しないと5行ごと。)
・preタグのスタイルオーバーロードは好みで。上記例ではpaddingを指定している。
・highlight.jsと異なりpreタグは改行してコードを貼ってOK。
2、ファイル一式をローカルにダウンロードして使う場合
https://github.com/google/code-prettify/raw/master/distrib/prettify-small.zip
をダウンロード、解凍し、google-code-prettifyディレクトリをhtdocsに設置する。
CDNのように1行オールインワンではないので、以下のようにテーマcss、必要言語のjsを記述する。
加えて、JavaScriptで初期化関数を書く必要がある。
<link rel="stylesheet" href="./google-code-prettify/skins/sons-of-obsidian.css"> <script src="./google-code-prettify/prettify.js"></script> <script src="./google-code-prettify/lang-css.js"></script> <script src="./google-code-prettify/lang-sql.js"></script> <script> window.addEventListener("load", function() { PR.prettyPrint(); }); </script>
トータルでは以下のようになる。出力結果は1、と全く同じ機能である。
HTML | googlecodeprettify_local.html | GitHub Source |
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./google-code-prettify/skins/sons-of-obsidian.css"> <script src="./google-code-prettify/prettify.js"></script> <script src="./google-code-prettify/lang-css.js"></script> <script src="./google-code-prettify/lang-sql.js"></script> <script> window.addEventListener("load", function() { PR.prettyPrint(); }); </script> <style type="text/css"> .prettyprint ol.linenums > li { list-style-type: decimal; } pre { padding: 5px 5px 5px 0px; } </style> <title>ソースコードハイライトサンプル</title> </head> <body> <pre class="prettyprint linenums lang-cpp"> #include <stdio.h> #include <stdlib.h> #include <string.h> int main(void) { unsigned char buf[8192]; int len; fprintf(stdout, "---BEGIN DATA CONTENTS---\n"); while (1) { len = fread(buf, 1, sizeof(buf), stdin); if (len <= 0) { break; } fwrite(buf, len, 1, stdout); } fprintf(stdout, "---END DATA CONTENTS---\n"); return 0; } </pre> </body> </html>
※本記事内容の無断転載を禁じます。
ご連絡は以下アドレスまでお願いします★
☆ServerNote.NETショッピング↓
ShoppingNote / Amazon.co.jp
☆お仲間ブログ↓
一人社長の不動産業務日誌
TSUKUMOのマルチGPUパソコンWA9J-X211/XTのUbuntu Server 22.04でMYCOEIROINK作成コードを実行し音声合成モデルをトレーニングする
TSUKUMOのマルチGPUパソコンWA9J-X211/XTにUbuntu Server 22.04とCOEIROINK Engineを導入する
Python venv(仮想環境作成)でError: Command returned non-zero exit status 1のエラー対処法
【Ubuntu】プロジェクトごとに複数のPythonバージョンを使い分ける
【PHP】フォーム入力を受け取り出力する
【Ubuntu】aptでインストールしたapache2にソースコンパイルしたphpをマルチスレッドモードで組み込む
【PHP】HTMLファイルを読み込んで文字列変換して出力する
TSUKUMOのマルチGPUパソコンWA9J-X211/XTにUbuntu Server 22.04とVOICEVOX Engineを導入する
【VOICEBOX Engine】403 Forbidden Origin not allowedの対処法
進研ゼミチャレンジタッチをAndroid端末化する
Windows版Google Driveが使用中と言われアンインストールできない場合
Googleファミリーリンクで子供の端末の現在地がエラーで取得できない場合
【C/C++】小数点以下の切り捨て・切り上げ・四捨五入
Windows11+WSL2でUbuntuを使う【2】ブリッジ接続+固定IPの設定
Androidホームで左にスワイプすると出てくるニュース共を一切表示させない方法
Googleスプレッドシートを編集したら自動で更新日時を入れる
【Apache】サーバーに同時接続可能なクライアント数を調整する
【Javascript】JSON配列内にある特定要素の取得法【Node.js】