How to customize CSS props in a preview theme about md-editor-v3 HOT 4 CLOSED

I think you can do something like this: #511 (comment)

Of course, if you want to target a single theme, the selector should be '.md-editor-preview.vuepress-theme p'

In addition, the theme source code can be https://github.com/imzbf/markdown-theme in the repository

from md-editor-v3.

Thanks, but sorry, I'm not experienced in CSS, so I still don't know where to insert the suggested CSS in my code.

If I understand you correctly, the suggested CSS for fixing the word breaks is this:

.md-editor-preview.vue-press-theme p {
    word-break: break-word;
}

So I put this at the end of my vue file, in SASS syntax, because I use SASS CSS preprocessor:

<style
  lang="sass"
  scoped
>
.md-editor-preview.vuepress-theme p
  word-break: break-word
</style>

But how can I use it with MdEditor?

I tried this:

<MdEditor 
   class="md-editor-preview.vuepress-theme"
   previewTheme="vuepress"
>

And I tried:

<MdEditor 
   class="md-editor-preview"
   previewTheme="vuepress"
>

But none of my attempts have an effect on the word breaks in the preview area.

from md-editor-v3.

Update: I found a workaround, by modifying the style.css file that ships with md-editor-v3, and importing that modified version of style.css. Not sure though whether that is the officially supported way of doing this.

from md-editor-v3.

No, '.md-editor-preview.vue-press-theme' is the class name in the editor, which will appear when you use the vue-press theme, and does not need to be set manually

<MdEditor 
-   class="md-editor-preview"
   previewTheme="vuepress"
>

from md-editor-v3.