Use included prism to highlight custom code block

[TheZoker]

Hi there,

I'm currently locking for a way to use the included prism to highlight code withing a custom div element.

Something like

<div class="code">...</div

and then

var code = document.getElementsByClassName('code');
Array.prototype.map.call(code, function(elem) {
   elem.highlight();
});

I know I can also include prism as a dependency, but I would rather just use the included syntax highlighting.
Does the prism script just look for a certain class or is there any method I can use to highlight custom elements?

Thanks!

[armano2]

you could use @theme/CodeBlock instead

docusaurus/packages/docusaurus-theme-classic/src/types.d.ts

Lines 53 to 62 in f51f219

	declare module '@theme/CodeBlock' {
	export type Props = {
	readonly children: string;
	readonly className?: string;
	readonly metastring?: string;
	};
	const CodeBlock: (props: Props) => JSX.Element;
	export default CodeBlock;
	}

import CodeBlock from '@theme/CodeBlock'

<CodeBlock metastring="js">...</CodeBlock>

personally i don't like how api of this component is written as it should have explicit properties for language, title, highlight instead of metastring

[slorber]

agree, we should rather have 1 comp wired to MDX and one component with a proper API surface to be more easily imported/used in MDX

[TheZoker]

Thanks, works! But my content is changing dynamically. Is there any option to apply the code highlighting on data change or is this currently only possible with the content that is provided on load?