Yuki Hattori yhatt

name

migrate-marp-theme-to-v5

description

Migrate Marp theme syntax-highlighting colors from legacy highlight.js `.hljs` and `.hljs-*` CSS selectors to Marp Core v5 `--marp-shiki-*` custom properties, infer a reviewable line-highlight color, and retain every legacy rule for backward compatibility. Use for Marp theme CSS and Marp Markdown that contains HTML style elements or a YAML `style` directive, including scoped or variant-specific highlighting colors.

Migrate Marp Theme to v5

Preserve legacy highlight.js rules and add Marp v5 Shiki color variables beside them. Treat the migration as additive: never delete or rewrite .hljs or .hljs-* rules.

Workflow

npm i --save-dev @marp-team/marp-cli gist:c8949276ceab6cd979f0f5c7b7c1b7fc
npx marp --engine marp-custom-engine your-slide.md

Regular text is only visible to you. Headlines go on the slide.

— iA Presenter (https://ia.net/presenter)

Unlike popular Markdown slide tools, iA Presenter has a unique approach to displaying written content in Markdown.

Are you looking at its innovative approach with longing eyes? No need to wait with your fingers crossed; the same feature can be achieved in Marp using a plugin.

git clone https://gist.github.com/54a1b07ff41485920d370e864860b8a8.git ia_presenter_style_notes

marp	true
theme	default

Marp diagram plugin example

Powered by kroki.io

title	Marp CLI experimental transitions
_class	lead gaia
theme	gaia
style	pre { font-size: 60px; }
marp	true

marp	false

Marp

Markdown presentation ecosystem

marp	true
theme	gaia

	const marpHideSlidesPlugin = (md) => {
	md.marpit.customDirectives.local.hide = (value) => ({
	hide: value === 'true',
	})

	md.core.ruler.after(
	'marpit_directives_apply',
	'marpit_hide_slides',
	(state) => {
	let withinSlide = false