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>
※本記事内容の無断転載を禁じます。
ご連絡は以下アドレスまでお願いします★
Wav2Lipのオープンソース版を改造して外部から呼べるAPI化する
Wav2Lipのオープンソース版で静止画の口元のみを動かして喋らせる
【iOS】アプリアイコン・ロゴ画像の作成・設定方法
オープンソースリップシンクエンジンSadTalkerをAPI化してアプリから呼ぶ【２】
オープンソースリップシンクエンジンSadTalkerをAPI化してアプリから呼ぶ【１】
【Xcode】iPhone is not available because it is unpairedの対処法
【Let's Encrypt】Failed authorization procedure 503の対処法
【Debian】古いバージョンでapt updateしたら404 not foundでエラーになる場合
ファイアウォール内部のWindows11 PCにmacOS Sequoiaからリモートデスクトップする
Windows11+WSL2でUbuntuを使う【2】ブリッジ接続+固定IPの設定
進研ゼミチャレンジタッチをAndroid端末化する
VirtualBoxの仮想マシンをWindows起動時に自動起動し終了時に自動サスペンドする
Googleスプレッドシートを編集したら自動で更新日時を入れる
Androidホームで左にスワイプすると出てくるニュース共を一切表示させない方法
【C/C++】小数点以下の切り捨て・切り上げ・四捨五入
Windows11のコマンドプロンプトでテキストをコピーする
size_tとssize_tを使い分けてSegmentation Faultを予防する
【C++】staticメンバ変数がundefined referenceとエラーになる場合