🎨 Improve web page clip code block content conversion siyuan-note/siy…

…uan#9865
88250 · Dec 13, 2023 · a1dea36 · a1dea36
1 parent 36eb02d
commit a1dea36
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 3 deletions.
diff --git a/h2m.go b/h2m.go
@@ -231,7 +231,7 @@ func (lute *Lute) genASTByDOM(n *html.Node, tree *parse.Tree) {
 		defer tree.Context.ParentTip()
 	case atom.Pre:
 		if firstc := n.FirstChild; nil != firstc {
-			if html.TextNode == firstc.Type || atom.Span == firstc.DataAtom || atom.Code == firstc.DataAtom {
+			if html.TextNode == firstc.Type || atom.Span == firstc.DataAtom || atom.Code == firstc.DataAtom || atom.Section == firstc.DataAtom {
 				node.Type = ast.NodeCodeBlock
 				node.IsFencedCodeBlock = true
 				node.AppendChild(&ast.Node{Type: ast.NodeCodeBlockFenceOpenMarker, Tokens: util.StrToBytes("```"), CodeBlockFenceLen: 3})

diff --git a/javascript/lute.min.js b/javascript/lute.min.js
diff --git a/javascript/lute.min.js.map b/javascript/lute.min.js.map
diff --git a/test/h2m_test.go b/test/h2m_test.go
@@ -18,6 +18,8 @@ import (
 
 var html2MdTests = []parseTest{
 
+	{"81", "<pre data-tool=\"mdnice编辑器\" style=\"margin-top: 10px;margin-bottom: 10px;color: rgb(0, 0, 0);text-align: left;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;\"><section style=\"padding: 15px 16px 16px;overflow-x: auto;color: rgb(171, 178, 191);display: -webkit-box;font-family: &quot;Operator Mono&quot;, Consolas, Monaco, Menlo, monospace;background-color: rgb(40, 44, 52);border-radius: 5px;margin-top: 0px;\"><span style=\"letter-spacing: normal;font-size: 12px;\">setbit key offset value  # 设置或者清空 key 的 value(字符串)在 offset 处的 bit 值<br>getbit key offset  # 返回 key 对应的 string 在 offset 处的 bit 值 <br>bitcount key [start end] # start end 范围内被设置为1的数量，不传递 start end 默认全范围<br></span></section></pre>", "```\nsetbit key offset value  # 设置或者清空 key 的 value(字符串)在 offset 处的 bit 值\ngetbit key offset  # 返回 key 对应的 string 在 offset 处的 bit 值 \nbitcount key [start end] # start end 范围内被设置为1的数量，不传递 start end 默认全范围\n```\n"},
+	{"80", "<pre data-tool=\"mdnice编辑器\" style=\"margin-top: 10px;margin-bottom: 10px;color: rgb(0, 0, 0);text-align: left;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;\"><section style=\"padding: 15px 16px 16px;overflow-x: auto;color: rgb(171, 178, 191);display: -webkit-box;font-family: &quot;Operator Mono&quot;, Consolas, Monaco, Menlo, monospace;background-color: rgb(40, 44, 52);border-radius: 5px;margin-top: 0px;\"><span style=\"letter-spacing: normal;font-size: 12px;\">object encoding xxx  # xxx 为键名<br></span></section></pre>", "```\nobject encoding xxx  # xxx 为键名\n```\n"},
 	{"79", "<p>foo <code class=\"docutils literal notranslate\"><span class=\"pre\">bar</span></code>) baz</p>", "foo `<span class=\"pre\">bar</span>`) baz\n"},
 	{"78", "foo $bar^2$ baz^3", "foo \\$bar^2\\$ baz^3\n"},
 	{"77", "<p>在做拉丁字母间距设计的时候，比较好的方法是从 <code class=\"hljs language-undefined\">n</code> 和 <code class=\"hljs language-undefined\">o</code> 起步。一旦这两个字母的边距设置合理，剩下的就相对简单了。所以，我建议你键入一些类似 <code class=\"hljs language-undefined\">noononno</code> 的组合，然后开始摆弄它们的边距设置，直到你满意为止。你可以在灰色的信息面板（显示 &gt; 显示信息，Cmd-Shift-I）中检查任意字符形的边距和字宽设置：</p>\n<figure><div class=\"RatioContainer\">\n<picture class=\"js-only\"><source data-srcset=\"https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-320x-q80.webp 320w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-640x-q80.webp 640w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-1280x-q80.webp 1280w\" type=\"image/webp\" sizes=\"360px\" srcset=\"https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-320x-q80.webp 320w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-640x-q80.webp 640w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-1280x-q80.webp 1280w\"><source data-srcset=\"https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-320x-q80.png 320w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-640x-q80.png 640w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-1280x-q80.png 1280w\" type=\"image/png\" sizes=\"360px\" srcset=\"https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-320x-q80.png 320w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-640x-q80.png 640w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-1280x-q80.png 1280w\"><img alt=\"\" class=\"lazyautosizes lazyloaded\" data-sizes=\"auto\" data-srcset=\"https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-320x-q80.png 320w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-640x-q80.png 640w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-1280x-q80.png 1280w\" height=\"64\" width=\"360\" sizes=\"360px\" srcset=\"https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-320x-q80.png 320w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-640x-q80.png 640w, https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-1280x-q80.png 1280w\"></picture>\n</div></figure>", "在做拉丁字母间距设计的时候，比较好的方法是从 `n` 和 `o` 起步。一旦这两个字母的边距设置合理，剩下的就相对简单了。所以，我建议你键入一些类似 `noononno` 的组合，然后开始摆弄它们的边距设置，直到你满意为止。你可以在灰色的信息面板（显示 > 显示信息，Cmd-Shift-I）中检查任意字符形的边距和字宽设置：\n\n![](https://cdn2.glyphsapp.com/media/pages/learn/spacing/6e6a8e08ef-1624987024/spacing-1-1280x-q80.png)\n"},