@codemovie/code-movie-markdown-plugins
Version:
Code.Movie plugin for Marked and markdown-it
96 lines (87 loc) • 4.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo (Animation)</title>
<style>
:root {
--cm-scene-background: transparent;
--cm-line-numbers-enabled: 1;
}
</style>
</head>
<body>
<script type="module">
// Import markdown-it and the plugin
import markdownIt from "https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/+esm";
import { markdownItCodeMoviePlugin } from "../../dist/markdown-it.js";
import {
animateHTML,
monokaiDark,
} from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/index.js";
// For flexibility reasons, the plugin does not ship with the main
// library. You will need to load the required functions, themes and
// language modules from somewhere, either a CDN as shown below or from
// your local installation of @codemovie/code-movie.
import json from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/json.js";
import ecmascript from "https://cdn.jsdelivr.net/npm/@codemovie/code-movie/dist/languages/ecmascript.js";
// The plugin can automatically add markup for <code-movie-runtime> custom
// elements, but this too requires the module for the element to be loaded
import "https://cdn.jsdelivr.net/npm/@codemovie/code-movie-runtime";
// Set the options for the plugin
const codeMoviePlugin = markdownItCodeMoviePlugin({
// Because the core library is not bundled with the plugin, you need to
// provide an adapter function. The adapter function is called with the
// array of frame objects, the relevant language object, and the parsed
// token for the animation. You can pass the first two arguments on to
// your particular version of the core library. The token might be
// interesting if you want to run `animateHTML()` with different
// arguments depending on metadata present in the token. If you want to
// tweak the tab size, theme, or run some side effects (maybe depending
// on the aforementioned metadata), this is the place to do that. You
// can also add extra HTML before, after, or around the output... or not
// call `animateHTML()` at all, but rather do something else with the
// raw data.
adapter(frames, language, token) {
return animateHTML(frames, {
tabSize: 2,
language,
theme: monokaiDark,
});
},
// Because the language modules are HUGE and can be configured in a variety
// of ways, you may want to be selective about what you include and how you
// configure each language.
languages: {
// Every entry in the languages object maps a class name ("json" in this
// case) to a language module instance. To then create an animation for
// JSON, you'll need an element with the class "code-movie" (as defined in
// the selector option above) and also the class "json". <pre> elements
// inside this element (again, as defined by the selector option) will
// then be processed and animated als JSON.
json: json(),
// Here, the class "javascript" maps to the ecmascript module with types
// disabled, while the class "typescript" maps to the same language
// module, but with types enabled.
javascript: ecmascript({ ts: false }),
typescript: ecmascript({ ts: true }),
},
// To automatically add markup for <code-movie-runtime> custom elements,
// set the "addRuntime" option to something truthy. To initialize the
// <code-movie-runtime> tags with the "controls" attribute, pass an
// object with the controls property set to something truthy. If you
// need more customization, consider extending the adapter function.
addRuntime: {
controls: true,
},
});
// Pass the plugin to markdown-it. Done!
const md = markdownIt().use(codeMoviePlugin);
// Time to parse some markdown...
const markdown = await fetch("./index.md").then((res) => res.text());
document.body.innerHTML += md.render(markdown);
document.body.innerHTML += `<p>Source:</p><pre>${markdown}</pre>`;
</script>
</body>
</html>