Replies: 1 comment 1 reply
-
I think you can swizzle <LiveProvider
key={isClient}
code={isClient ? children.replace(/\n$/, '') : ''}
transformCode={transformCode || ((code) => `${code};`)}
theme={prismTheme}
{...props}>
{playgroundPosition === 'top' ? (
<>
<ResultWithHeader />
<EditorWithHeader />
</>
) : (
<>
<EditorWithHeader />
<ResultWithHeader />
</>
)}
</LiveProvider>
Remember that the code transformation must be runnable in the browser (synchronously), you can't use a nodejs package here
Swizzling means you opt-in for current implementation details. So you generally have to understand those implementation details in the first place and figure out yourself which components to "override" because in the end you'll have to maintain those overrides yourself as Docusaurus updates them. Please make sure to read the source code fo this theme and to understand it before even thinking about overriding it, because we can't provide support for that and you are now on your own.
It may not be necessary, I believe the playground will be live if you use the |
Beta Was this translation helpful? Give feedback.
-
Hi all, I'm trying to enable live code editing for a programming language that is not JS, but can be transpiled to JS. This involves an extra compilation step before the live codeblock theme's internal one. Ideally I can wrap/swizzle a theme's component (It is not clear which exact component it should be though) when the block is of this specific language?
Beta Was this translation helpful? Give feedback.
All reactions