一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器

时间:2022-10-11 14:04:50

有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块。

花了一点时间研究了一下各家的编辑器,规则却各不相同。有的要求代码块被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 属性里包含 "code" 关键词,或者要求代码块里必须包含至少一个 <br> 。如果不符合这些要求,不是变成普通文本,就是丢失换行缩进,或者丢失颜色样式。

所以,这就难了。先得找个支持代码高亮的编辑器,仔细地选择并复制代码块,复制完还得编辑剪贴板里的 HTML 。这就不如干脆写个转换工具了。

因为浏览器操作系统剪贴板可能不太方便,下面用 aardio 写一个工具软件。

先看软件成品演示:

一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器

 

软件用法:

1、输入编程语言名称(支持自动完成)。

2、然后在输入框中粘贴要转换的编程代码。

3、点击「复制高亮代码块」按钮。

然后我们就可以打开在线图文编辑器直接粘贴生成的高亮代码块了,兼容  TT、WX、BJ 编辑器。

下面是这个软件的 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 ></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();

打开 aardio 创建工程,然后复制粘贴上面的代码到 main.aardio 里面就可以直接运行,或生成独立 EXE 文件:

一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器

这个软件的原理:

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 复制到系统剪贴板:

import win.clip.html;

var cb = win.clip.html();
cb.write(html); 

然后只要愉快地粘贴代码块就可以。

如果是 aardio 代码不需要用这个工具,在 aardio 编辑器里右键直接点『 复制全部到 HTML 代码块 』就可以了:

一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器

 注意按住 Ctrl 键再点 『 复制全部到 HTML 代码块 』 生成的高亮代码块会启用自动换行。