feat: add code-block-error-line

eunbae0 · Feb 16, 2024 · 316f162 · 316f162
1 parent 9ddf626
commit 316f162
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -109,6 +109,17 @@ const config: Config = {
 		prism: {
 			theme: prismThemes.github,
 			darkTheme: prismThemes.dracula,
+			magicComments: [
+				{
+					className: "theme-code-block-highlighted-line",
+					line: "highlight-next-line",
+					block: { start: "highlight-start", end: "highlight-end" },
+				},
+				{
+					className: "code-block-error-line",
+					line: "error-next-line",
+				},
+			],
 		},
 		colorMode: {
 			defaultMode: "dark",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -28,3 +28,11 @@
 	--ifm-color-primary-lightest: #7ddd93;
 	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.code-block-error-line {
+	background-color: #ff000020;
+	display: block;
+	margin: 0 calc(-1 * var(--ifm-pre-padding));
+	padding: 0 var(--ifm-pre-padding);
+	border-left: 3px solid #ff000080;
+}