theme setting in code() is not working well

[leonwang908]

if there are no theme setting like theme: 'github-light', code will be highlighter. but if include theme setting in code(). all code will be rendering as normal code block without highlight.

<script lang="ts">
	import { Carta, MarkdownEditor } from 'carta-md';
	import { code } from '@cartamd/plugin-code';

	import './github.scss';

	const carta = new Carta({
		sanitizer: false,
		extensions: [
			code({
				theme: 'github-light',
				langs: ['html', 'js', 'ts', 'python', 'ruby', 'php', 'java', 'c', 'csharp', 'cpp', 'css', 'sql', 'swift', 'go', 'kotlin', 'rust', 'bash', 'scala', 'julia', 'powershell', 'json', 'xml', 'yaml', 'latex', 'r', 'dart']
			})
		]
	});

	export let value = `This is an example inspired by [GitHub](https://github.com)
\`\`\`js
console.log('Hello, World!');
\`\`\`

\`\`\`python
def sum(a, b):
	return a + b
\`\`\`

`;
</script>

<MarkdownEditor bind:value mode="tabs" theme="github" {carta} />

<style>
	:global(.shiki),
	:global(.shiki span) {
		color: var(--shiki-dark) !important;
	}

	:global(button) {
		background: transparent;
		border: 0;
	}
</style>

[leonwang908]

btw, setting of 'langs' looks like ingored

[BearToCode]

Hello;
you need to load the theme beforehand:

const carta = new Carta({
  // ...
  code({
    theme: 'github-light',
  }),
  shikiOptions: {
    themes: ['github-light']
  }
})

I'll add that to the docs.
Since you are not using a dual theme, make sure to remove the dual-theme related css, if you had it, otherwise you'll still see it as white. I think it's not required to specify standard languages in langs, but to be honest I'm not 100% sure. If in the future you see them not working, try explicitly adding them

[leonwang908]

solved, thank you very much! I super love you editor, if there are more detail document it will be very helpful.

btw, just wondering. I thought only language set in langs will be rendering, but looks like all language will be render in some rule?

[leonwang908]

Hello, there is the issue that setting of langs is ingored.
when build project it will create a lot of huge js that no needed. it will decrease loading speed.

[BearToCode]

Don't worry, those languages are bundled into the output directory. This does not mean they are automatically imported with the editor. In fact, if you go to your editor and start using an additional language while having the network tab open, you'll see that languages are imported only when needed.