deserializeHtml lose code language

[goodchengwang]

When I use deserializeHtml to convert html to json, everything works fine, but the language of the code is lost, causing the code to be incorrectly styled.

Can anyone help me? thanks

const initialValue = useMemo(() => {
    const tmpEditor = createPlateEditor({ plugins })
    return deserializeHtml(tmpEditor, {
      element: html
    })
 }, [])

[12joan]

I don't think the HTML spec supports adding a language to <pre> or <code> elements, so there's no reason why deserializeHtml would support it.

HTML is a lossy format for storing Plate documents. You should store the editor value as JSON instead.

[goodchengwang]

I'm getting my html from a crawler, so how can I convert it into a block of code with styles?

[12joan]

If you just want to preserve a snapshot of the syntax highlighting styles on the crawled page (that will become out of date if the user modifies the code in the editor), you can try using the font color plugin, which includes a deserializer that automatically looks for the color CSS property in the source HTML. If the color property comes from a classname, you'll need to preprocess your HTML to include it in style attributes instead.

If you want to infer the source language so that you can implement syntax highlighting using Prism (the library Plate uses), this may be impossible depending on whether the websites you're crawling expose the source language in some way. Your solution will need to be customised for each website you're crawling, and your logic will break if the website changes their implementation.

Take for example the HTML GitHub uses to render the code block in your post above.

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">initialValue</span> <span class="pl-c1">=</span> <span class="pl-en">useMemo</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">tmpEditor</span> <span class="pl-c1">=</span> <span class="pl-en">createPlateEditor</span><span class="pl-kos">(</span><span class="pl-kos">{</span> plugins <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-k">return</span> <span class="pl-en">deserializeHtml</span><span class="pl-kos">(</span><span class="pl-s1">tmpEditor</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">element</span>: <span class="pl-s1">html</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
 <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span></pre><div class="zeroclipboard-container position-absolute right-0 top-0">
    <!-- [...] -->
  </div></div>

If GitHub was the website you were scraping, you could infer that the language is JavaScript by looking for the highlight-source-js classname.