remark-refractor
Highlight code blocks in Markdown files with Refractor
Also add support for custom language called js-with-links-details
via MDX that allows you to write rich annotations inside JS snippets:
// docs.mdx
module.exports = { <mode "/concepts/mode"> <default> mode: "production", // "production" | "development" | "none" </default> mode: "production", // enable many optimizations for production builds mode: "development", // enabled useful tools for development mode: "none", // no defaults </mode>}
You would need to add MDX loader to handle .mdx
files to your favorite JS bundler.
Once imported you would need to pass a Pre
React component to the MDX components
prop:
export default {
components: {
pre: Pre
}
};
Pre
component would receive your code as children
prop, this plugin also adds componentname
and url
to every child, that you can use to build any imaginable UI:
const components = { return <RichComponent children=children ...props />; }; const Pre = { const newChildren = ReactChildren; const newProps = children: newChildren ; return <pre> <code ...newProps /> </pre> ;};