【CSS】CSSでシンタックハイライトを作る

【CSS】CSSでシンタックハイライトを作る

CSS wp-note 2021.06.09

コードを記載するシンタックハイライト機能には「prism.js」というJavaSriptを使っているんですが、コードの一部だけちょっと色を変えたりとかは簡単にはできないので自由度の高いオリジナルのシンタックハイライト機能をCSSで作ってみました。

シンタックハイライトとは？

作例

下図は「prism.js」です。デザインはそのまま模倣しました。

.line-highlight {
	top: 29px!important;
}
.wp-post-image {
	border: 1px gainsboro solid;
}

以下が今回作成したCSSのみのシンタックハイライトです。

「prism.js」だと簡単に色を変えることができないんですがCSSのものだとその辺は自由に設定できます。ただ、ちょっとだけ面倒ですがコードデザインに拘りたい方にはいいかも知れません。

CSSしか使っていないので外観のデザインやラインも自由に設定できます。

尚、HTML構造を見れば分かると思いますが番号を振るために１行ごと<div>で囲っているので一括で張り付けたりはできません。

ラインの色を変えているところのCSSは下図のような感じです。

.sample_a .og_code_2:nth-child(2) {
    background-color: #2695a0;
    border-radius: 10px;
    display: inline-block;
    padding-right: 1em;
}

HTML

HTML構造は下図のような感じです。

<div class="og_code_1">
	<span class="og_code_title skyblue"><!-- コード名を記載 --></span>
	<div class="vertical_line">
		<div class="og_code_2">
        <!-- ここにコードを記載 -->
		</div>
        ここにコードを記載
		<!-- ここにコードを記載 -->
		</div>
        <!-- ここにコードを記載 -->
		<div class="og_code_2">
		</div>
	</div>
</div>

CSS

CSSはこんな感じです。

入れ子のdivで縦ラインを付け、更に内側のdivにcontent:counterで番号を振っています。２桁になると位置がズレるので詳しくはCSSをご覧ください。

.og_code_title {
    top: 0px;
    left: 0px;
    padding: 2px 20px 0px 20px;
    display: inline-block;
    position: absolute;
    z-index: 1;
    font-weight: bold;
}
.og_code_title:before {
    font-family: FontAwesome;
    margin-right: 0.5em;
    content: "\f044 ";
}
.og_code_1 {
	border: 1px gainsboro solid;
	padding: 1em 1em 1em 3.8em;
	background-color: #f6f6f6;
	counter-reset: og_code_2;
	font-size: 90%;
	overflow: auto;
	white-space: nowrap;
	line-height: 1.8;
	position: relative;
}
.vertical_line {
	border-left: 1px gainsboro solid;
	padding: 0 9px 0 7px;
}
.og_code_2:before {
	counter-increment: og_code_2;
	content: counter(og_code_2);
	position: relative;
	left: -30px;
}
/* 2桁の番号になった時の位置調整 */
.og_code_2:nth-child(n+10)::before {
    counter-increment: og_code_2;
    content: counter(og_code_2);
    position: relative;
    left: -40px;
}

z-indexは下図のようにコード名の背景色を同色にした時に上に重ねて枠線を隠す為です。

    background-color: #f6f6f6;
    border-top: 1px gainsboro solid;
    border-left: 1px gainsboro solid;
    border-right: 1px gainsboro solid;

エディタに追加

テキストエディタのボタンとして追加するコードです。

// QTags.addButton( id, ボタンテキスト, 開始タグ, 終了タグ, アクセスキー, タイトル, 優先順位(1が先頭) );
if(!function_exists( 'add_quicktags_to_text_editor')) {
    function add_quicktags_to_text_editor() {
        if(wp_script_is('quicktags')){?>
        <script>
			QTags.addButton( 'og_code', 'og_code', '<div class="og_code_1"><span class="code_title php_color"></span><div class="vertical_line"><div class="og_code_2"></div><div class="og_code_2"></div><div class="og_code_2"></div><div class="og_code_2"></div>','', '', '自作コード', 1 );
        </script>
        <?php
        }
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor');