mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-19 17:49:19 +02:00
Co-authored-by: stnor <stefan@selessia.com> Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com> Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Matija Sirk <matija.sirk@kopit.si> Co-authored-by: AHMET BAYHAN BAYRAMOGLU <49499275+ABB65@users.noreply.github.com> Co-authored-by: Stefan Norberg <stefan@norberg.org> Co-authored-by: Josh Goldberg <git@joshuakgoldberg.com> Co-authored-by: Muhammad Hammad <33136628+mhnaeem@users.noreply.github.com> Co-authored-by: Denis Al-Khelali <denis.al-khelali@itechart-group.com> Co-authored-by: Balthasar Hofer <lebalz@outlook.com> Co-authored-by: Danny Kim <0916dhkim@gmail.com> Co-authored-by: Frieder Bluemle <frieder.bluemle@gmail.com> Co-authored-by: John Reilly <johnny_reilly@hotmail.com> Co-authored-by: Robert Lawrence <62929526+r-lawrence@users.noreply.github.com> Co-authored-by: Sadegh Karimi <sadegh.krmi@gmail.com> Co-authored-by: Lachlan Heywood <lachieh@users.noreply.github.com> Co-authored-by: mturoci <64769322+mturoci@users.noreply.github.com> Co-authored-by: 宋锦丰 <36468758+SJFCS@users.noreply.github.com> Co-authored-by: Nguyễn Thành Nam <namnguyenthanh.work@gmail.com> Co-authored-by: Dongjoon Lee <djunnni@gmail.com> Co-authored-by: Thomas.CA <44041651+Thomascogez@users.noreply.github.com> Co-authored-by: Riccardo <riccardo.odone@gmail.com> Co-authored-by: Lane Goolsby <lanegoolsby@yahoo.com> Co-authored-by: Mariusz Krzaczkowski <m.krzaczkowski@yetiforce.com> Co-authored-by: Matija Sirk <sirkmatija@gmail.com> Co-authored-by: Jiří <zmrhal.j@gmail.com> |
||
---|---|---|
.. | ||
src | ||
.npmignore | ||
package.json | ||
README.md | ||
tsconfig.client.json | ||
tsconfig.json |
Docusaurus Live Codeblock
You can create live code editors with a code block live
meta string.
Install
npm i @docusaurus/theme-live-codeblock # or yarn add @docusaurus/theme-live-codeblock
Modify your docusaurus.config.js
module.exports = {
...
+ themes: ['@docusaurus/theme-live-codeblock'],
presets: ['@docusaurus/preset-classic']
...
}
Example:
```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 (
<div>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}
```