HTML - シンタックスハイライト - prism.js - コード後の改行（改）

1.　概要

2.　設定

1.　概要

　別のページで、コード記述の後の行が間延びするので、調整する方法を書いていますが。
　2026年6月3日時点で、ダウンロードしたら、「.css」のキーワードが変わっているので、改めて記述します。

2.　設定

　ずばり書きますが、わたしの場合「.scss」に記述していますが、このあたりは、ほぼ「.css」まんまかな。


// ==========================================================================
// 最新公式プラグイン完全適合：改行防止・枠内ホバー復活・下部余白の完全撤去
// ==========================================================================

// 1. 外枠 div の強制改行を阻止し、下部の無駄な余白を完全にゼロにする
div.code-toolbar {
	display: inline-block !important; 	// 強制改行を確実に阻止
	vertical-align: middle;
	width: 100%;
	margin-bottom: 0px !important;    	// 外枠自体の下マージンを完全撤去
	padding-bottom: 0px !important;   	// 外枠自体の下パディングを完全撤去
	position: relative;
}

// 2. ツールバー（言語・Copy）を枠内の右上に絶対配置（初期状態は透明）
div.code-toolbar > .toolbar {
	position: absolute !important;
	top: .5em !important;
	right: .5em !important;
	opacity: 0 !important;            	// 初期状態は非表示
	transition: opacity 0.25s ease-in-out !important;
	z-index: 100 !important;
}

// 3. 【重要】外枠にマウスホバーしたときだけ確実に浮き上がらせる
div.code-toolbar:hover > .toolbar {
	opacity: 1 !important;            	// ホバー時に確実に表示
}

// 4. 中にある pre タグ自体の下部マージンを直撃して余白を追い込む
div.code-toolbar > pre[class*="language-"] {
	margin-bottom: -0.5em !important;    // ★ここを 0.2em や 0 などの数値に変えることで、下の隙間を限界まで詰める
}

div.code-toolbar > .toolbar .toolbar-item {
	display: inline-block;
}

div.code-toolbar > .toolbar a {
	cursor: pointer;
}

div.code-toolbar > .toolbar button {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;

	overflow: visible;
	padding: 0;
	user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
// これが 言語名と「Copy」を表示している
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span
{
	color: #bbb;

	font-size: 1em;

	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;
}


　以前、「pre.code-toolbar」だったものが「div.code-toolbar」になっちゃってるのです。

　348～375行が、コード後の改行や間隔を調整しています。
　397以降が、「Language」や「Copy」ボタンをホバーで、テキスト表示するようにしています。