2024-05-02
当サイトは結局今回のGoogle Code Prettifyに落ち着きました。行番号がスムーズに表示でき、設置も楽でしたので。
１、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
にあるので、差し替えればＯＫ。
・デフォルトでサポートされていない言語は別途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;
}
とすれば、１行ごとに番号が振られる。（指定しないと５行ごと。）
・preタグのスタイルオーバーロードは好みで。上記例ではpaddingを指定している。
・highlight.jsと異なりpreタグは改行してコードを貼ってＯＫ。
２、ファイル一式をローカルにダウンロードして使う場合
https://github.com/google/code-prettify/raw/master/distrib/prettify-small.zip
をダウンロード、解凍し、google-code-prettifyディレクトリをhtdocsに設置する。
CDNのように１行オールインワンではないので、以下のようにテーマ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>
トータルでは以下のようになる。出力結果は１、と全く同じ機能である。
| 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>
※本記事内容の無断転載を禁じます。
ご連絡は以下アドレスまでお願いします★
オープンソースリップシンクエンジンSadTalkerをDebianで動かす
ファイアウォール内部のOpenAPI/FastAPIのdocsを外部からProxyPassで呼ぶ
Debian 12でsshからshutdown -h nowしても電源が切れない場合
【Windows＆Mac】アプリのフルスクリーンを解除する方法
Debian 12でtsコマンドが見つからないcommand not found
Debian 12でsyslogやauth.logが出力されない場合
Debian 12で固定IPアドレスを使う設定をする
Debian 12 bookwormでNVIDIA RTX4060Ti-OC16GBを動かす
【Debian】apt updateでCD-ROMがどうのこうの言われエラーになる場合
【Windows10】リモートデスクトップ間のコピー＆ペーストができなくなった場合の対処法
Windows11+WSL2でUbuntuを使う【2】ブリッジ接続+固定IPの設定
【Apache】サーバーに同時接続可能なクライアント数を調整する
GitLabにHTTPS経由でリポジトリをクローン＆読み書きを行う
【C/C++】小数点以下の切り捨て・切り上げ・四捨五入
Intel Macbook2020にBootCampで入れたWindows11 Pro 23H2のBluetoothを復活させる
【PHP】Mail/mimeDecodeを使ってメールの中身を解析（準備編）
【ひかり電話＋VoIPアダプタ】LANしか通ってない環境でアナログ電話とFAXを使う
Windows11のコマンドプロンプトでテキストをコピーする