mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-23 03:29:11 +02:00
5e0d11dbaf
* feat: add filename in CodeBlock * Fix code to use Regex to find title from markdown and Update style * Fix reviewed point - Delete unnecessary template literals - Delete unnecessary "important!" from css * Add title in live codeblock * Just edit code order * Add demo for code title * Add docs about code title in markdown-features.mdx * Make code title height scalable * Rename codeBlockWrapper to codeBlockContent * Make copyButton appear when hovering codeTitle * Fix docs description about code title |
||
|---|---|---|
| .. | ||
| src | ||
| package.json | ||
| README.md | ||
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>
);
}
```