背景＆フォントカラー各指定値変更ネタ備忘録
google-code-prettifyは、ダウンロード版も用意されておりますね。
ま、こちらを利用しなくともライブラリアクセスで使えるとは思うんですけど？念のための
カスタマイズ備忘録として記載しておきます。
ダウンロードは、こちらから...
https://github.com/jmblog/color-themes-for-google-code-prettify
head内...スタイルも確認（現在黒背景にしてます）
<link href="prettify.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript">
.// Say hello world until the user starts questioning
.// the meaningfulness of their existence.
.function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
ここまで....
CSS指定値です...
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint {
background: #000;
font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
border: 0 !important;
}
.pln {
color: #fff;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
color: #666666;
}
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
padding-left: 1em;
background-color: #000;
list-style-type: decimal;
}
@media screen {
/* string content */
.str {
color: #6f0;
}
/* keyword */
.kwd {
color: #f60;
}
/* comment */
.com {
color: #93c;
}
/* type name */
.typ {
color: #458;
}
/* literal value */
.lit {
color: #458;
}
/* punctuation */
.pun {
color: #fff;
}
/* lisp open bracket */
.opn {
color: #fff;
}
/* lisp close bracket */
.clo {
color: #fff;
}
/* markup tag name */
.tag {
color: #fff;
}
/* markup attribute name */
.atn {
color: #9c9;
}
/* markup attribute value */
.atv {
color: #6f0;
}
/* declaration */
.dec {
color: #fff;
}
/* variable name */
.var {
color: #fff;
}
/* function name */
.fun {
color: #fc0;
}
}
カスタマイズは、code-prettifyで、テーマ選択できます...
https://jmblog.github.io/color-themes-for-google-code-prettify/
CSSを開いてコードをスタイルシートに張り付けるだけで、背景＆フォントカラーを指定できます...
上記スタイルを御覧になって気が付いたかと思われますが、左端に行順位数字が、５～０で
表示されていますね..
class指定の囲みコード..prettyprintに linenumsを加えることで行数NOが表示されるのです
が、１～10と綺麗に表示されない不具合...解決策を試したのですが、ワードプレスなどでは
正常ながらもシリウスですとなんか？途中飛ばしのぺケ作動...
実際のところ...google-code-prettifyで数字行NO表示させてもコピー段階で、コードのみ
選択しても数字までコピーされ貼り付け後に削除作業が付加されるので面倒...
...なければそれはそれで便利じゃんと解釈してはおりますが...
数値行不要ならこちらのコードを利用したほうが良いかもしれません？
https://cdn.rawgit.com/google/code-prettify/master/styles/index.html