From 8c259145efa428abcfbace1d63ae1e413dd7e453 Mon Sep 17 00:00:00 2001
From: "Glenn Y. Rolland" <glenux@glenux.net>
Date: Fri, 16 Feb 2024 23:56:36 +0100
Subject: [PATCH] fix: enable code highlight in marp
---
.marp/engine.js | 6 ++++--
.marp/theme.scss | 27 +++++++++++++++++++++++----
2 files changed, 27 insertions(+), 6 deletions(-)
diff --git a/.marp/engine.js b/.marp/engine.js
index 68abd62..d3b6878 100644
--- a/.marp/engine.js
+++ b/.marp/engine.js
@@ -1,6 +1,7 @@
// engine.js
// You have to run `npm i @marp-team/marp-core` at first.
const { Marp } = require('@marp-team/marp-core')
+const highlightLines = require('markdown-it-highlight-lines')
module.exports = opts => {
@@ -10,11 +11,12 @@ module.exports = opts => {
opts.html = true
// console.log(opts)
-
const marp = new Marp(opts)
// Disable parsing fragmented list
marp.markdown.core.ruler.disable('marpit_fragment')
- return marp
+ // Enable code lines highlighting
+ // ref. https://github.com/marp-team/marp-vscode/issues/146
+ return marp.use(highlightLines)
}
diff --git a/.marp/theme.scss b/.marp/theme.scss
index a7490eb..7975a87 100644
--- a/.marp/theme.scss
+++ b/.marp/theme.scss
@@ -2,14 +2,15 @@
@import-theme 'default';
$primaryColor: #662d91;
-$secondaryColor: #241c1c;
-$tertiaryColor: #111111;
+$secondaryColor: #f60;
+$tertiaryColor: #241c1c;
$textColor: #111111;
body {
--primary-color: $primaryColor;
--secondary-color: $secondaryColor;
- --text-color: $tertiaryColor;
+ --tertiary-color: $tertiaryColor;
+ --text-color: $textColor;
}
section {
@@ -18,6 +19,14 @@ section {
padding: 120px 80px 80px 80px;
}
+// https://github.com/marp-team/marp-vscode/issues/146
+.highlighted-line {
+ background-color: #ff0;
+ display: block;
+ margin: 0 -16px;
+ padding: 0 16px;
+}
+
section footer {
opacity: 0.75;
color: $textColor; }
@@ -179,6 +188,12 @@ bc-row > bc-column[bc-secondary] {
padding: 24px;
}
+bc-row > bc-column[bc-tertiary] {
+ background-color: $tertiaryColor;
+ color: white;
+ padding: 24px;
+}
+
bc-row > bc-column[bc-grey] {
background-color: #eeeeee;
padding: 24px;
@@ -194,6 +209,10 @@ bc-row > bc-column:first-of-type {
margin-left: 0px;
}
+bc-row > bc-column p:only-child {
+ margin-bottom: 0px;
+}
+
bc-row > bc-column > h1:first-child,
bc-row > bc-column > h2:first-child,
bc-row > bc-column > h3:first-child,
@@ -203,7 +222,7 @@ bc-row > bc-column > h6:first-child {
margin-top: 0;
}
-p img:first-child:last-child[alt*="center"] {
+p img:only-child[alt*="center"] {
display: block;
margin-left: auto;
margin-right: auto;