jiichan.com

PROGRAMMING

CSS
javascript
PHP
Java

シンタックスハイライト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でツールバーに新たにボタンを作る方法も 本家 にあるようですが、必要性を感じないので試してみませんでした。