Marp
How to render markdown presentation in browser using marp? #480
-
|
I would like to integrate marp to a website, or more specifically, to implement markdown editing and live preview functionality in a website. What I want is similar to https://spec.commonmark.org/dingus/. For now, I am trying to make a proof-of-concept app. Since I am new to front-end development, I don't know how to start, and I cannot find helpful guides in the docs. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
This is a deadly simple but actually working example for the live editor of Marp Core. <!DOCTYPE html>
<html lang="en">
<body>
<div style="display: flex; width: 1000px; height: 600px">
<textarea id="md" style="flex: 1; resize: none"></textarea>
<div id="render" style="flex: 1; overflow-y: auto"></div>
</div>
<script type="module">
import { Marp } from 'https://esm.sh/@marp-team/marp-core?bundle'
import browser from 'https://esm.sh/@marp-team/marp-core/browser'
const marp = new Marp({ script: false })
md.addEventListener('input', () => {
const { html, css } = marp.render(md.value)
render.innerHTML = `${html}<style>${css}</style>`
browser(render) // Post-process for browser to apply auto scaling
})
</script>
</body>
</html>This snippet is using Marp Core through esm.sh with bundle mode, but commonly we STRONGLY RECOMMEND to use the JavaScript bundler for building your own app. |
Beta Was this translation helpful? Give feedback.
-
|
I have adapted the above example to simply render a given slideshow (string of markdown) as html in a webpage; how would I use the theme I use in 'Marp for VS Code' (or the equivalent css) here? I have tried various things and the effects seem to be, well, not as expected (eg. positioning of custom elements respected, heading colours not). |
Beta Was this translation helpful? Give feedback.
-
|
👉 https://marpit.marp.app/usage?id=apply-theme const marp = new Marp({ script: false })
marp.themeSet.add(`
/* @theme example */
@import 'default';
section {
background-color: #f0f0f0;
}
h1 {
color: red;
}
`) |
Beta Was this translation helpful? Give feedback.
-
|
Worked great. Thanks for your help! |
Beta Was this translation helpful? Give feedback.
This is a deadly simple but actually working example for the live editor of Marp Core.