欢迎大家来到IT世界,在知识的湖畔探索吧!
有些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 HTML 格式的高亮代码块。
花了一点时间研究了一下各家的编辑器，规则却各不相同。有的要求代码块被包含于 <code> … </code> 或者 <pre> <code> … </code> </pre> , 有些要求 class 属性里包含 “code” 关键词，或者要求代码块里必须包含至少一个 <br> 。如果不符合这些要求，不是变成普通文本，就是丢失换行缩进，或者丢失颜色样式。
所以，这就难了。先得找个支持代码高亮的编辑器，仔细地选择并复制代码块，复制完还得编辑剪贴板里的 HTML 。这就不如干脆写个转换工具了。
因为浏览器操作系统剪贴板可能不太方便，下面用 aardio 写一个工具软件。
先看软件成品演示：
软件用法：
1、输入编程语言名称（支持自动完成）。
2、然后在输入框中粘贴要转换的编程代码。
3、点击「复制高亮代码块」按钮。
然后我们就可以打开在线图文编辑器直接粘贴生成的高亮代码块了。
下面是这个软件的 aardio 源代码：
import win.ui; /*DSG{{*/ var winform = win.form(text="HTML 代码块生成工具 - 本工具使用 aardio 语言编写";right=1055;bottom=674;bgcolor=16777215) winform.add( button={cls="button";text="复制高亮代码块";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在网页编辑器直接粘贴";z=4}; cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2}; editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5}; static={cls="static";text="请选择语言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3}; webCtrl={cls="custom";text="自定义控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1} ) /*}}*/ import web.view; var wb = web.view(winform.webCtrl); import win.clip.html; wb.export({ onHighlight = function(html,background,foreground){ html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>` + html + `</code></pre>`; html,count = string.replace(html,'\n',"<br>"); if(!count){ html = string.replace(html,`\</code\>\</pre\>一键生成通用高亮代码块到剪贴板，可粘贴到在线编辑器-今日头条 ,`<br></code></pre>`); } var cb = win.clip.html(); cb.write(html); winform.setTimeout( function(){ winform.editCode.show(true); winform.webCtrl.show(false); winform.text = "HTML 代码块生成工具 - 已复制高亮代码块到剪贴板，可在网页直接粘贴"; },1000); }; setLanguages = function(langs){ winform.languages = langs; } }) winform.cmbLangs.onEditChange = function(){ var text = string.lower(winform.cmbLangs.text); var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); winform.cmbLangs.autoComplete(items); } winform.cmbLangs.editBox.disableInputMethod(); import web.prism; import wsock.tcp.asynHttpServer; var httpServer = wsock.tcp.asynHttpServer(); httpServer.run(web.prism,{ ["/index.html"] = /***** <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link href="prism.css" rel="stylesheet" /> </head> <body> <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre> <script src="prism.js"></script> <script> function computedColorStyle(element, options = {}) { Array.prototype.forEach.call(element.children,child => { computedColorStyle(child, options); }); const computedStyle = getComputedStyle(element); element.style["color"] = computedStyle.getPropertyValue("color"); } highlight = function(code,language){ var html = Prism.highlight(code, Prism.languages[language], language); var codeEle = document.getElementById("code"); codeEle.innerHTML = html; computedColorStyle(codeEle); const computedStyle = getComputedStyle(codeEle); onHighlight(codeEle.innerHTML ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color") ,computedStyle.getPropertyValue("color")); } setLanguages( Object.keys(Prism.languages) ); </script> </body> </html> *****/ }); wb.go( httpServer.getUrl("/index.html")); winform.button.oncommand = function(id,event){ winform.text = "HTML 代码块生成工具 - 本工具使用 aardio 语言编写" winform.editCode.show(false); winform.webCtrl.show(true); wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text); } winform.show(); win.loopMessage();
欢迎大家来到IT世界,在知识的湖畔探索吧!
打开 aardio 创建工程，然后复制粘贴上面的代码到 main.aardio 里面就可以直接运行，或生成独立 EXE 文件：
这个软件的原理：
1、首先通过 WebView2 调用 Prism.js 高亮代码。为了可以内存加载 Prism.js （ 支持生成独立 EXE ），我写了一个 aardio 扩展库 web.prism 。关于 WebView2 请参考：放弃 Electron，拥抱 WebView2！JavaScript 快速开发独立 EXE 程序
2、因为 Prism.js 生成的 HTML 代码块都是使用 class 属性指定样式，所以我们需要调用 getComputedStyle 获取最终渲染的字体颜色属性。
3、最后在 JavaScript 里调用 aardio 函数处理生成的 HTML 代码块，aardio 的任务是将 HTML 修改为更合适直接粘贴的格式，并尽可能地处理各图文编辑器的兼容问题。然后调用 win.clip.html 将处理好的 HTML 复制到系统剪贴板：
欢迎大家来到IT世界,在知识的湖畔探索吧!import win.clip.html;
var cb = win.clip.html();
cb.write(html);
然后只要愉快地粘贴代码块就可以。
如果是 aardio 代码不需要用这个工具，在 aardio 编辑器里右键直接点『 复制全部到 HTML 代码块 』就可以了：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/34426.html
