cannot work with mode-watcher

[leonwang908]

carta will stop rendering stuff like highlightjs, <h1> if I do like below in +layout.svelte

import { ModeWatcher, setMode, resetMode } from 'mode-watcher';

btw, is there any easy way to add dual theme like light/dark in carta?

[BearToCode]

Hello,

I updated docs to include a simple explanation of how to implement a dark mode, you can check them out here, but all you have to do is the following:

/* Editor dark mode */
/* Only if you are using the default theme */
html.dark .carta-theme__default {
    --border-color: var(--border-color-dark);
    --selection-color: var(--selection-color-dark);
    --focus-outline: var(--focus-outline-dark);
    --hover-color: var(--hover-color-dark);
    --caret-color: var(--caret-color-dark);
    --text-color: var(--text-color-dark);
}

/* Code dark mode */
/* Only if you didn't specify a custom code theme */
html.dark .shiki,
html.dark .shiki span {
    color: var(--shiki-dark) !important;
}

I do not how mode-watcher works, but if it just sets a class="dark" to the root html element(or body...), it should work fine with the instructions explained above.

Let me know if this solved your issue.

[leonwang908]

Hello, this one is very helpful for setting dark mode, but I still facing rendering issue.

the elements show me <h1>test</h1> but looks like there are some css issue that cannot show heading correctly. do you have any ideas?

[mjrdd]

I had the same issue. But I think it is related to tailwind since it clears the default styling. You have to manually style it since the styling is not included in the default.css.

[BearToCode]

There are no embedded styles for the generated HTML. You can write them yourself, or use something like github-markdown-css

[leonwang908]

after import github-markdown-css, My app could rendering h1. but highlightjs still not working

and I just wondering why my app works with single carta, but if I add it to my layout it will stop working.

[BearToCode]

Are you using plugin-code to highlight code blocks? The issue is with them not being highlighted? Can you explain what you mean with:

and I just wondering why my app works with single carta, but if I add it to my layout it will stop working.

Does it crash, or it isn't rendering what you expected?

[leonwang908]

yes, I do added plugin-code

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

    import 'carta-md/default.css'; /* Default theme */

    const carta = new Carta({
        sanitizer: false,
        extensions: [code()]
    });

    let value = '';
</script>

<MarkdownEditor {carta} bind:value />

it not renderting to highlighted code, just normal code block

[BearToCode]

Here is an example with everything, and it's working. Try and see where the differences are. Are you sure you are using the latest version of @cartamd/plugin-code?

[leonwang908]

yes, I am using the latest version of plugin-code. and I can see <style type="text/css" data-vite-dev-id="D:/Dev/example/node_modules/.pnpm/highlight.js@11.9.0/node_modules/highlight.js/styles/github-dark-dimmed.css">hogehoge</style> in the head

the problem is like carta works well if I put it in a single new svelte project. but if I add +layout.svelte with mode-watcher, a lot of stuffs cannot rendering correctly.

[BearToCode]

This is very weird, I think there is something wrong with you config, as highlight.js has nothing to do with this project. And I honestly don't see a way mode-watcher could prevent the actual highlighter, Shiki, from working.

From your screenshot it looks like the language is not even parsed...

[leonwang908]

oh, solved.... I should config a wrong file. (I should config /hogehoge/+page.svelte but actually I did on test/+page.svelte.

Really thanks for you help!