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;