有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块 。
花了一点时间研究了一下各家的编辑器 , 规则却各不相同 。有的要求代码块被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 属性里包含 "code" 关键词,或者要求代码块里必须包含至少一个 <br>。如果不符合这些要求,不是变成普通文本,就是丢失换行缩进,或者丢失颜色样式 。
所以,这就难了 。先得找个支持代码高亮的编辑器,仔细地选择并复制代码块,复制完还得编辑剪贴板里的 HTML。这就不如干脆写个转换工具了 。
因为浏览器操作系统剪贴板可能不太方便,下面用 aardio 写一个工具软件 。
先看软件成品演示:
软件用法:
1、输入编程语言名称(支持自动完成) 。然后我们就可以打开在线图文编辑器直接粘贴生成的高亮代码块了,兼容 TT、WX、BJ 编辑器 。
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=https://www.huyubaike.com/biancheng/"prism.css" rel="stylesheet" />
推荐阅读
- 小米电视怎么一键看电视直播(小米电视看直播台方法)
- mac通过docker一键部署Nexus3
- spring boot项目使用mybatis-plus代码生成实例
- 怎么删除微信好友(一键恢复已删除好友)
- mac通过docker一键部署MySQL8
- 好用的文章生成软件有哪些
- 手机怎样关闭安全模式(一键强制恢复出厂设置)
- mac通过docker一键部署Jenkins
- 通用 HTTP 签名组件的另类实现
- 5种分布式ID生成方案 分布式ID详解