glenux/docmachine-containers
glenux/docmachine-containers
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity

fix: enable code highlight in marp

Browse source
This commit is contained in:
Glenn Y. Rolland 2024-02-16 23:56:36 +01:00
parent 1fe182d9fe
commit 8c259145ef
2 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.marp/engine.js
View file

@ -1,6 +1,7 @@
// engine.js // engine.js
// You have to run `npm i @marp-team/marp-core` at first. // You have to run `npm i @marp-team/marp-core` at first.
const { Marp } = require('@marp-team/marp-core') const { Marp } = require('@marp-team/marp-core')
const highlightLines = require('markdown-it-highlight-lines')
module.exports = opts => { module.exports = opts => {
@ -10,11 +11,12 @@ module.exports = opts => {
opts.html = true opts.html = true
// console.log(opts) // console.log(opts)
const marp = new Marp(opts) const marp = new Marp(opts)
// Disable parsing fragmented list // Disable parsing fragmented list
marp.markdown.core.ruler.disable('marpit_fragment') 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)
} }

27
.marp/theme.scss
View file

@ -2,14 +2,15 @@
@import-theme 'default'; @import-theme 'default';
$primaryColor: #662d91; $primaryColor: #662d91;
$secondaryColor: #241c1c; $secondaryColor: #f60;
$tertiaryColor: #111111; $tertiaryColor: #241c1c;
$textColor: #111111; $textColor: #111111;
body { body {
--primary-color: $primaryColor; --primary-color: $primaryColor;
--secondary-color: $secondaryColor; --secondary-color: $secondaryColor;
--text-color: $tertiaryColor; --tertiary-color: $tertiaryColor;
--text-color: $textColor;
} }
section { section {
@ -18,6 +19,14 @@ section {
padding: 120px 80px 80px 80px; 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 { section footer {
opacity: 0.75; opacity: 0.75;
color: $textColor; } color: $textColor; }
@ -179,6 +188,12 @@ bc-row > bc-column[bc-secondary] {
padding: 24px; padding: 24px;
} }
bc-row > bc-column[bc-tertiary] {
background-color: $tertiaryColor;
color: white;
padding: 24px;
}
bc-row > bc-column[bc-grey] { bc-row > bc-column[bc-grey] {
background-color: #eeeeee; background-color: #eeeeee;
padding: 24px; padding: 24px;
@ -194,6 +209,10 @@ bc-row > bc-column:first-of-type {
margin-left: 0px; margin-left: 0px;
} }
bc-row > bc-column p:only-child {
margin-bottom: 0px;
}
bc-row > bc-column > h1:first-child, bc-row > bc-column > h1:first-child,
bc-row > bc-column > h2:first-child, bc-row > bc-column > h2:first-child,
bc-row > bc-column > h3:first-child, bc-row > bc-column > h3:first-child,
@ -203,7 +222,7 @@ bc-row > bc-column > h6:first-child {
margin-top: 0; margin-top: 0;
} }
p img:first-child:last-child[alt*="center"] { p img:only-child[alt*="center"] {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;