はてなブログのデフォルトのコードブロックは、シンプルすぎて少し寂しいので、色々とカスタマイズしてみました
ちなみに完成形はこんな感じになります
CSSだけで行けると思ったんですが、思いつかず…
1. JavaScript
<script> var codeBlocks = document.getElementsByClassName('code'); [].forEach.call(codeBlocks, function(e) { if (!/lang/.test(e.className)) { return; } var lines = e.innerHTML.split(/\n/); var codeBlock = ""; lines.forEach(function(line){ if(line != ""){ codeBlock += '<div class="code-line">' + line + '</div>' } }) e.innerHTML = codeBlock; }); </script>
2. CSS
/*スクロール設定*/ pre, code { max-height: 500px; overflow: scroll; white-space: pre !important; text-overflow: clip !important; } /*偶数行のみ背景色を適用*/ .code-line:nth-child(even){ background-color: #eee; } /*行数を表示*/ .code-line { counter-increment: linenumber; } .code-line::before { content: counter(linenumber); display: inline-block; color: #ccc; text-align: right; } /*言語名を表示*/ pre.code:before { content: attr(data-lang); display: inline-block; background: white; color: #666; padding: 3px; position: absolute; margin-left: -10px; margin-top: -30px; } /*一行のコードブロックの文字色の指定*/ code { color: #808000 }
1. スクロールの設定
まずは、折り返しです
デフォルトでは、横幅の限界を迎えると次の行に折り返します
これダサいので、横スクロールできるようにしましょう
pre, code { overflow : scroll; white-space : pre !important; text-overflow : clip !important; }
overflow: scroll;
内部の文字列が外側にはみ出る場合に、スクロールができるようにします
横スクロールだけの設定はoverflow-x: scrollで出来ますが、
2. 縦の長さを制限するで縦スクロールも必要になるので、縦横のスクロールを有効にしています
white-space: pre !important;
pre設定することで、折り返しが発生しないようになります
しかし、はてなブログではデフォルトでwhite-space: pre-wrap(折り返しする設定)が設定されているため、その設定を上書きする!importantを設定します
text-overflow: clip !important;
text-overflowにclipを設定しておかないと、コードブロックからはみ出す部分が三点リーダー(…)で省略されてしまいます
こちらも、はてなブログがデフォルトでellipsisを設定しているため、!importantで上書きします
2. 縦の長さを制限する
長いコードを貼り付けた時に、そのまま表示されてしまうのもカッコよくないですし（場合によりますが）、
縦長かつ横長の場合に横スクロールバーが画面に表示されないのは良くないです
(横スクロールバーはコードブロックの最下部に表示されるため)
max-heightを指定して、はみ出す分は縦スクロールで表示するようにします
pre, code { max-height: 500px; }
max-height: 500px;
コードブロックの高さの最大値を設定します
本当はmax-height: 80%とかにして、画面サイズに合わせて縦の最大値を決めたかったのですが、
どうもこれでは正常に動作しないようなので、仕方なく500pxを指定しています
画面サイズに合わせて上手いことやる方法がわかる方、教えて下さい
3. 背景をストライプに
良くあるコードブロックは、ストライプになっているイメージだったので、
私も背景をストライプにしてみました
.code-line:nth-child(even){ background-color: #eee; }
:nth-child(even)
CSSの:nth-child()擬似クラスは、兄弟要素の中での位置に基づいてCSSを適用します
今回は、偶数行目の色を指定するため、引数にevenを与えます
background-color: #eee;
偶数行の背景色の指定です
#eeeは、この色です
4. 行数を表示
行番号を表示するようにします
行番号の文字色や場所などを指定します
JavaScriptで各行を<div>で囲み、カウント・行番号の表示をしています
<script> var codeBlocks = document.getElementsByClassName('code'); [].forEach.call(codeBlocks, function(e) { if (!/lang/.test(e.className)) { return; } var lines = e.innerHTML.split(/\n/); var codeBlock = ""; lines.forEach(function(line){ if(line != "") { codeBlock += '<div class="code-line">' + line + '</div>'; } }) e.innerHTML = codeBlock; }); </script>
JavaScript
コードブロックには、デフォルトでcodeクラスが付いているので、その各行を<div>で囲み、code-lineクラスを付与します
.code-line { counter-increment: linenumber; } .code-line::before { content: counter(linenumber); display: inline-block; color: #ccc; text-align: right; }
counter-increment: linenumber;
変数(カウンタ名)linenumberの値を１ずつ進めます
content: counter(linenumber);
上記のcounter-incrementでカウントアップした変数linenumberをコードブロックに挿入します
display: inline-block;
解説長くなるので、参考記事貼っておきます
color: #ccc;
行番号の文字色です
#cccは、この色です
text-align: right;
文字を右寄せにします
右寄せと言っても、上記のdisplay: inline-block内での右寄せです
これが、
こうなります
5. 言語名の表示
コードブロックの先頭に言語名を表示します
例えば、マークダウン記法では
```css
main {
color: #fff
}
```
という風にコードブロックを書きますが、その時にシンタックスハイライトのために指定した文字が表示されます
上記の例では、cssが表示されます
pre.code:before { content: attr(data-lang); display: inline-block; background: white; color: #666; padding: 3px; position: absolute; margin-left: -10px; margin-top: -30px; } pre.code { padding-top: 30px !important; }
詳細説明はめんどくさい前述している要素も多く、
一つ一つ触れると長くなってしまうので、省略させてくださいw
何かあれば、コメントください
6. 一行のコードブロックの文字色
一行のコードの文字色を指定します
マークダウン記法だとこんな風に各パターンですね
```var a = 'Hello!'```
code { color: #808000 }
color: #808000
#808000は、この色です
このあたりはデザインテンプレートごとに合う色が異なると思いますので、好きな色を指定してください
以下のサイトで好きな色を探しました
7. 完成
改めて完成系です
ブログのデザインテンプレートによっては、一部いじった方がいいかもしれません
1. JavaScript
<script> var codeBlocks = document.getElementsByClassName('code'); [].forEach.call(codeBlocks, function(e) { if (!/lang/.test(e.className)) { return; } var lines = e.innerHTML.split(/\n/); var codeBlock = ""; lines.forEach(function(line){ if(line != ""){ codeBlock += '<div class="code-line">' + line + '</div>' } }) e.innerHTML = codeBlock; }); </script>
これをデザイン>カスタマイズ>フッタにコピペします
2. CSS
/*スクロール設定*/ pre, code { max-height: 500px; overflow: scroll; white-space: pre !important; text-overflow: clip !important; } /*偶数行のみ背景色を適用*/ .code-line:nth-child(even){ background-color: #eee; } /*行数を表示*/ .code-line { counter-increment: linenumber; } .code-line::before { content: counter(linenumber); display: inline-block; color: #ccc; text-align: right; } /*言語名を表示*/ pre.code:before { content: attr(data-lang); display: inline-block; background: white; color: #666; padding: 3px; position: absolute; margin-left: -10px; margin-top: -30px; } /*一行のコードブロックの文字色の指定*/ code { color: #808000 }
これをデザイン>カスタマイズ>デザインCSSにコピペします
