From 7a22f2af6d63c483e09519288ac2dc24883a6b6c Mon Sep 17 00:00:00 2001 From: Titus Wormer Date: Fri, 9 Sep 2022 18:03:17 +0200 Subject: Add example of syntax highlighting to readme --- readme.md | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/readme.md b/readme.md index 861d017..6ba948f 100644 --- a/readme.md +++ b/readme.md @@ -205,6 +205,99 @@ The files in `src/` are as follows: > 🚧 **To do**. +### Example: syntax highlighting code + +This example shows how `micromark-rs` can be used to turn markdown into an HTML +file. +When the HTML is opened in a browser, the code examples that were in the +markdown are then syntax highlighted by client side JavaScript using +[`starry-night`][starry-night]. +The `starry-night` library matches how GitHub highlights code on their platform. + +Say we have this `example.rs`: + +```rs +extern crate micromark; +use micromark::{micromark_with_options, Constructs, Options}; +use std::fs; + +fn main() -> Result<(), String> { + let markdown = r###" +# Hello + +…world! + +~~~js +console.log('it works!') +~~~ +"###; + + let html = micromark_with_options( + markdown, + &Options { + constructs: Constructs::gfm(), + ..Options::default() + }, + )?; + + let js = r###" +import {createStarryNight, common} from 'https://esm.sh/@wooorm/starry-night@1?bundle' +import {toDom} from 'https://esm.sh/hast-util-to-dom@3?bundle' + +const starryNight = await createStarryNight(common) +const prefix = 'language-' + +const nodes = Array.from(document.body.querySelectorAll('code')) + +for (const node of nodes) { + const className = Array.from(node.classList).find((d) => d.startsWith(prefix)) + if (!className) continue + const scope = starryNight.flagToScope(className.slice(prefix.length)) + if (!scope) continue + const tree = starryNight.highlight(node.textContent, scope) + node.replaceChildren(toDom(tree, {fragment: true})) +} +"###; + + let html = format!( + " + +Hello + + +{} + + +", + html, js + ); + + match fs::write("index.html", html) { + Ok(()) => {} + Err(error) => return Err(format!("Could not write `index.html`: {:?}", error)), + } + + Ok(()) +} +``` + +The code example in the markdown as HTML will first look like this: + +```html +
console.log('it works!')
+
+``` + +Opening that page in a browser, we’d see the `` being swapped with: + + +```html +
console.log('it works!')
+
+``` + ## Markdown ### CommonMark @@ -356,6 +449,7 @@ Support this effort and give back by sponsoring: [chalker]: https://github.com/ChALkeR [license]: https://github.com/micromark/micromark/blob/main/license [author]: https://wooorm.com +[starry-night]: https://github.com/wooorm/starry-night [contribute]: #contribute [sponsor]: #sponsor [commonmark]: #commonmark -- cgit