🎨 Improve HTML code block clipping siyuan-note/siyuan#12642

h2m.go

@@ -516,6 +516,24 @@ func (lute *Lute) genASTByDOM(n *html.Node, tree *parse.Tree) {
 							table.InsertBefore(node)
 							table.Unlink()
 							tree.Context.Tip = node
+
+							parent := n.Parent
+							for i := 0; i < 32; i++ {
+								if nil == parent {
+									break
+								}
+
+								class := util.DomAttrValue(parent, "class")
+								if strings.Contains(class, "language-") {
+									node.ChildByType(ast.NodeCodeBlockFenceInfoMarker).CodeBlockInfo = []byte(class[strings.Index(class, "language-")+len("language-"):])
+									break
+								} else if strings.Contains(class, "highlight ") {
+									node.ChildByType(ast.NodeCodeBlockFenceInfoMarker).CodeBlockInfo = []byte(class[strings.Index(class, "highlight ")+len("highlight "):])
+									break
+								}
+								parent = parent.Parent
+							}
+
 							return
 						}
 					}

test/h2m_test.go

@@ -18,6 +18,7 @@ import (
 
 var html2MdTests = []parseTest{
 
+	{"184", "<div class=\"highlight-container\" data-rel=\"C\"><div class=\"highlight-container\"><figure class=\"iseeu highlight c\"><table><tbody><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 如果alpha的值域是[0,1]，这里相当于将其拉伸为[0,255]</span></span><br><span class=\"line\"><span class=\"comment\">// 所以相当于是 Alpha = 1 - (1 - Alpha1) * ( 1 - Alpha2)乘以了两次255</span></span><br><span class=\"line\"><span class=\"comment\">// 当a1和a2都接近于0的时候，会导致计算得到的A值不为0，导致叠加不正常</span></span><br><span class=\"line\"><span class=\"type\">uint32_t</span> A = (<span class=\"number\">0xffff</span> - (<span class=\"number\">0xff</span> - a1) * (<span class=\"number\">0xff</span> - a2));</span><br><span class=\"line\"><span class=\"comment\">// 下面左边部分少左移8位，相当于乘以了255</span></span><br><span class=\"line\"><span class=\"type\">uint32_t</span> R = (((rgba1 &lt;&lt; <span class=\"number\">8</span> &amp; <span class=\"number\">0xff00</span>U) * a1 + (rgba2 &gt;&gt; <span class=\"number\">0</span>  &amp; <span class=\"number\">0xff</span>U) * a2 *(<span class=\"number\">0xff</span> - a1)) / A) &amp; <span class=\"number\">0xff</span>U;</span><br><span class=\"line\"><span class=\"type\">uint32_t</span> G = (((rgba1 &gt;&gt; <span class=\"number\">0</span> &amp; <span class=\"number\">0xff00</span>U) * a1 + (rgba2 &gt;&gt; <span class=\"number\">8</span>  &amp; <span class=\"number\">0xff</span>U) * a2 *(<span class=\"number\">0xff</span> - a1)) / A) &amp; <span class=\"number\">0xff</span>U;</span><br><span class=\"line\"><span class=\"type\">uint32_t</span> B = (((rgba1 &gt;&gt; <span class=\"number\">8</span> &amp; <span class=\"number\">0xff00</span>U) * a1 + (rgba2 &gt;&gt; <span class=\"number\">16</span> &amp; <span class=\"number\">0xff</span>U) * a2 *(<span class=\"number\">0xff</span> - a1)) / A) &amp; <span class=\"number\">0xff</span>U;</span><br></pre></td></tr></tbody></table></figure><div class=\"copy-button\"><i class=\"fa-regular fa-copy\"></i></div><div class=\"fold-button\"><i class=\"fa-solid fa-chevron-down\"></i></div></div></div>", "```c\n// 如果alpha的值域是[0,1]，这里相当于将其拉伸为[0,255]\n// 所以相当于是 Alpha = 1 - (1 - Alpha1) * ( 1 - Alpha2)乘以了两次255\n// 当a1和a2都接近于0的时候，会导致计算得到的A值不为0，导致叠加不正常\nuint32_t A = (0xffff - (0xff - a1) * (0xff - a2));\n// 下面左边部分少左移8位，相当于乘以了255\nuint32_t R = (((rgba1 << 8 & 0xff00U) * a1 + (rgba2 >> 0  & 0xffU) * a2 *(0xff - a1)) / A) & 0xffU;\nuint32_t G = (((rgba1 >> 0 & 0xff00U) * a1 + (rgba2 >> 8  & 0xffU) * a2 *(0xff - a1)) / A) & 0xffU;\nuint32_t B = (((rgba1 >> 8 & 0xff00U) * a1 + (rgba2 >> 16 & 0xffU) * a2 *(0xff - a1)) / A) & 0xffU;\n```\n"},
 	{"183", "<pre data-index=\"0\" class=\"set-code-show\" name=\"code\"><code class=\"language-css hljs\"><ol class=\"hljs-ln\" style=\"width:100%\"><li><div class=\"hljs-ln-numbers\"><div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"1\"></div></div><div class=\"hljs-ln-code\"><div class=\"hljs-ln-line\"><span class=\"hljs-selector-tag\">html</span> {</div></div></li><li><div class=\"hljs-ln-numbers\"><div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"2\"></div></div><div class=\"hljs-ln-code\"><div class=\"hljs-ln-line\">  <span class=\"hljs-attribute\">overflow-y</span>: overlay;</div></div></li><li><div class=\"hljs-ln-numbers\"><div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"3\"></div></div><div class=\"hljs-ln-code\"><div class=\"hljs-ln-line\">}</div></div></li></ol></code><div class=\"hljs-button signin active\" data-title=\"登录复制\" data-report-click=\"{&quot;spm&quot;:&quot;1001.2101.3001.4334&quot;}\" onclick=\"hljs.signin(event)\"></div></pre>", "```css\nhtml {\n  overflow-y: overlay;\n}\n```\n"},
 	{"182", "<p><markerow8 data-id=\"G2wN\" data-pkid=\"5272681\" class=\"wucaiclrx1\" style=\"color: rgb(0, 0, 0); background-color: rgba(244, 220, 97, 0.698);\">清晨的阳光透过淡薄的云层，纷纷扬扬地落在了</markerow8><strong><markerow8 data-id=\"G2wN\" data-pkid=\"5272681\" class=\"wucaiclrx1\" style=\"color: rgb(0, 0, 0); background-color: rgba(244, 220, 97, 0.698);\">幽静的林间小道</markerow8></strong><markerow8 data-id=\"G2wN\" data-pkid=\"5272681\" class=\"wucaiclrx1\" style=\"color: rgb(0, 0, 0); background-color: rgba(244, 220, 97, 0.698);\">上。树叶在微</markerow8><em><markerow8 data-id=\"G2wN\" data-pkid=\"5272681\" class=\"wucaiclrx1\" style=\"color: rgb(0, 0, 0); background-color: rgba(244, 220, 97, 0.698);\">风中轻轻摇曳，</markerow8></em> <markerow8 data-id=\"G2wN\" data-pkid=\"5272681\" class=\"wucaiclrx1\" style=\"color: rgb(0, 0, 0); background-color: rgba(244, 220, 97, 0.698);\">仿佛在跳着一场优雅的舞蹈。草丛中，晶莹的露珠闪烁着微光，宛如一颗颗细碎的宝石。鸟儿欢快地歌唱着，声音</markerow8><em><strong><markerow8 data-id=\"G2wN\" data-pkid=\"5272681\" class=\"wucaiclrx1\" style=\"color: rgb(0, 0, 0); background-color: rgba(244, 220, 97, 0.698);\">清脆悦耳，在这宁静而美丽的画面中增添了一</markerow8></strong></em><markerow8 data-id=\"G2wN\" data-pkid=\"5272681\" class=\"wucaiclrx1\" style=\"color: rgb(0, 0, 0); background-color: rgba(244, 220, 97, 0.698);\">抹灵动的气息。</markerow8></p>", "清晨的阳光透过淡薄的云层，纷纷扬扬地落在了**幽静的林间小道**上。树叶在微*风中轻轻摇曳，* 仿佛在跳着一场优雅的舞蹈。草丛中，晶莹的露珠闪烁着微光，宛如一颗颗细碎的宝石。鸟儿欢快地歌唱着，声音***清脆悦耳，在这宁静而美丽的画面中增添了一***抹灵动的气息。\n"},
 	{"181", "<p><span class=\"vditor-reset__preview\"><img src=\"https://b3logfile.com/file/2024/08/image-tU91NvB.png?imageView2/2/interlace/1/format/webp\" alt=\"image.png\" style=\"background-image: none; background-color: transparent;\"><div class=\"fn__flex-inline\">\n<svg><use xlink:href=\"#iconPhotoActual\"></use></svg>\n<span class=\"fn__space5\"></span>496 x 344</div></span></p>", "![image.png](https://b3logfile.com/file/2024/08/image-tU91NvB.png?imageView2/2/interlace/1/format/webp)\n"},