Markdown component editor language?

[zagoskin]

Hi! First of all I want to thank you for your effort. I'm loving the solution (i hate wordpress too). I'm passionate about C# and .NET in general and seeing it put to practice to this extent just makes me super happy and excited.

I was playing around with the blog and I noticed the text in the "Create blog" (or edit) markdown editors is being highlighted in red. I think this is due to Blazorise using CodeMirror internally and thinking I'm making a mistake, because the text is in spanish.

I've also confirmed that typing in english does not highlight my text.

I'm not very familiar with Blazorise or CodeMirror in general so I was seeking help as to how I can configure this so that it doesn't highlight text in spanish.

Things that I've tried but didn't work

• Setting the lang attribute for the _layout html
• Changing the CultureInfo properties to the spanish culture
• Using blazorise ITextLocalizer to set the language to spanish
• I'm out of ideas

Thanks for anyone that is able to provide help!

P.S: if you anyone also knows how to edit colors in general of the markdown editor that'd be great but this would just be a great plus. I don't mind it too much.

[linkdotnet]

Hey @zagoskin

Thanks for your kind words. There are some measures we/you could do (thinking of adding some of those to the mainline branch). If we have a look at https://blazorise.com/docs/extensions/markdown (which is the markdown editor I am using). There are some tweaks:

• NativeSpellcheck: If set to false, disable native spell checker. Defaults to true.
• SpellChecker: If set to false, disable the spell checker. Defaults to true

Setting those to false will shut down the whole thing.

if you anyone also knows how to edit colors in general of the markdown editor

Can you elaborate on this one?

EDIT:
To disable the whole spellcheck, edit the MarkdownTextarea Component:

<Markdown ElementId="@Id"
          Placeholder="@Placeholder"
          Class="@Class"
          Value="@Value"
          ValueChanged="s => Value = s"
          MaxHeight="@Height"
          PreviewRender="PreviewFunction"
          ImageAccept="image/*"
          ImageUploadChanged="UploadFiles"

          NativeSpellcheck="false"
          SpellChecker="false"

          PreviewImagesInEditor="true"/>

[linkdotnet]

Really really appreciate your kind words! Thanks so much. Let me know if you need anything. Always a treat!

[linkdotnet]

Maybe more specifics why on the blazorise website the toggle is working but not here: the basic reason is that I am using bootstrap 5 and the bootstrap data attributes - and blazorise uses a different mechanism.

not tested, but something like this should work:

html[data-bs-theme='light'] .editor-toolbar {…}

For the light theme settings and ‚dark‘, well, for the dark mode.

If you want to customize the colors

[zagoskin]

That's great! Gonna try with that one.

I also added tailwindcss, but I installed it by hand instead of doing it through blazorise as I was a bit scared it could break some of the stuff going. So i'll hook the theme selector to that attribute too.

Awesome!

[linkdotnet]

That was one of the things I was thinking of as well - migrating to tailwindcss. But that takes just an immense amount of time.

[zagoskin]

Yeah don't worry about it. Your setup is fine and I was able to add tailwind with a prefix and have both of them working side by side so whatever custom stuff I wanna add I'm free to use either bs or tailwind.

The good thing is that your solution is not limiting me to use bootstrap/vanilla css.