PROGRAMMING
Warning: Invalid argument supplied for foreach() in /home/mmken1/jiichan.com/public_html/programming/programming.php on line 99
シンタックスハイライトPrismのカスタマイズ
Prismは軽いし、見た目も何か格好いい。
その格好いいPrismだが、更に格好良くするためにtoolbarをどうにかしたいと考えた。
色々調べた結果を記録しておく。
Chrome DevToolsでPrismのHTML構造を探る
Prismを利用しているサイトを開き、F12キーをクリックしてChrome DevToolsを開く。
Chrome DevToolsのElementsタブを見ていくと、PrismのHTML構造が分かった。
HTML構造は次の通りだった。
<div class="code-toolbar"><!-- Prismのコンテナー -->
<pre class="line-numbers language-java"><!-- コード表示部 -->
<code class="language-java">
<!-- コードのいろいろ -->
</code>
</pre>
<div class="toolbar"><!-- ツールバー -->
<div class="toolbar-item">
<span>Java</span><!-- 言語名表示部 -->
</div>
<div class="toolbar-item">
<button type="button">Copy</button><!-- コピーボタン -->
</div>
</div>
</div>
prism.cssを修正しカスタマイズする
prism.cssの修正すべき要素が分かったので、自分なりの好みで修正したのが次のcss。
prism.cssの修正した部分のみ(このサイトで使用中)
/* Code blocks */
pre[class*="language-"] {
width: 90%;
padding: 1em;
/* margin: .5em 0; */
margin-left: 40px;
overflow: auto;
}
/*prism全体の位置的設定*/
div.code-toolbar {
position: relative;
margin-top: 26px;
}
/* ツールバーの幅や位置、背景色 */
div.code-toolbar > .toolbar {
position: absolute;
top: -26px;
left: 40px;
width: 90%;
background: #616060;
}
/*
div.code-toolbar:hover > .toolbar {
opacity: 1;
} */
/* div.code-toolbar:focus-within > .toolbar {
opacity: 1;
} */
/* 言語表示部(追加) */
div.code-toolbar > .toolbar .toolbar-item span {
margin-left: 10px;
color: #fff;
}
/* Copy ボタン */
div.code-toolbar > .toolbar button {
background: none;
border: 0;
color: #e2777a;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
position: absolute;
right: 10px;
top: 5px;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button {
/* div.code-toolbar > .toolbar span { */
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
/* div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: inherit;
text-decoration: none;
} */
参考になるかどうかですが、是非試して見てください。 javascriptでツールバーに新たにボタンを作る方法も 本家 にあるようですが、必要性を感じないので試してみませんでした。