A Docusaurus theme for editable live code examples using JARLE.
npm install docusaurus-theme-jarle-codeblockA Docusaurus theme for editable live code examples using JARLE.
Install
``sh`
npm install docusaurus-theme-jarle-codeblock
Modify your docusaurus.config.js
`js`
module.exports = {
...
+ themes: ['docusaurus-theme-jarle-codeblock'],
presets: ['@docusaurus/preset-classic']
...
}
Example in your markdown
```jsx live
function Clock(props) {
const [date, setDate] = useState(new Date());
useEffect(() => {
var timerID = setInterval(() => tick(), 1000);
return function cleanup() {
clearInterval(timerID);
};
});
function tick() {
setDate(new Date());
}
return (
``Handling local imports
By default
import statements in a JARLE codeblock will use native
ESM imports, which lets you use dependencies from online repositories like
skypack.If you want to use _local_ dependencies bundling with your app instead, a "remark" plugin
is provided to do some processing on Markdown code blocks to enable this.
Modify your
docusaurus.config.js`js
module.exports = {
themes: ['docusaurus-theme-jarle-codeblock'],
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
+ remarkPlugins: [require('docusaurus-theme-jarle-codeblock/remark')],
},
blog: {
+ remarkPlugins: [require('docusaurus-theme-jarle-codeblock/remark')],
},
},
],
],
...
};
`This allows codeblocks like the following:
``
`jsx live
import Button from '@site/src/components/Button';
`
```