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

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

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

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

先看软件成品演示：

软件用法：

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 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();

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

import win.clip.html;

var cb = win.clip.html();

cb.write(html);

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

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

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

 
 

一键生成通用高亮代码块到剪贴板，快捷粘贴兼容 TT/WX/BJ 编辑器的更多相关文章

  1. [Java 开源项目]一款无需写任何代码，即可一键生成前后端代码的工具

    作者:HelloGitHub-小鱼干 JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开发模式:Online Coding 模式-> 代码生成器模式 ...

  2. Intellij idea 生成for循环代码块

    itar 生成array for代码块 for (int i = 0; i < array.length; i++) { = array[i]; } itco 生成Collection迭代 fo ...

  3. 实战：一键生成前后端代码，Mybatis-Plus代码生成器让我舒服了

    实战:一键生成前后端代码,Mybatis-Plus代码生成器让我舒服了 前言 在日常的软件开发中,程序员往往需要花费大量的时间写CRUD,不仅枯燥效率低,而且每个人的代码风格不统一.MyBatis-P ...

  4. idea 自动生成try/catch代码块的快捷键

    好像每个人的快捷键可能不同:我的是  Alt+Shift+Z 网上查的是  Ctrl+Alt+T 如果都不是可以点选工具栏生成try/catch(并可查看到自己的快捷键是什么):Code->Su ...

  5. Fiddler抓包一键生成代码

    首先我们的需求场景是 用Fiddler抓到某个接口调用后,用代码来模拟调用,一般我们写代码会有3个步骤: 1设置http请求相关的参数:header,method,url,cookie等 2设置pos ...

  6. 用Python高亮org-mode代码块

    文章同时可在我的github blog上阅读:http://cheukyin.github.io/python/2014-08/pygments-highlight-src-export-html.h ...

  7. MWeb 1.5 发布！增加打字机滚动模式、发布到 Evernote、印象笔记、Wordpress.com、Blogger、编辑器内代码块语法高亮

    打字机滚动模式(Typewriter Scrolling) 快捷键:CMD + Option + T,菜单:View - Typewriter Scrolling ,效果如下图: 发布到 Everno ...

  8. 使用sencha cmd 一键生成你的应用程序代码

    一键生成你的应用程序代码: ------------------------------------------------------------ 我们的出发点就是使用命令来产生一个应用程序,执行以 ...

  9. JAVA之旅（五）——this，static，关键字，main函数，封装工具类，生成javadoc说明书，静态代码块

    JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名的情况 ...

随机推荐

  1. electron-vue打包出现问题汇总

    打包过程中出现下载status code 404 1.可能是网络不好,导致相关electron包无法正常下载,也有可能是需要挂代理 2.可能是编译过程的链接出现错误,一般为网址中缺少或多了一个v,建议 ...

  2. Javascript 函数声明、调用、闭包

    1 # Javascript 函数声明.调用.闭包 2 # 一.函数声明 3 # 1.直接声明.浏览器在执行前,会先将变量和函数声明进行提升. 4 fn(); 5 function fn () { 6 ...

  3. C#静态类、静态成员、静态方法

    一.作用 静态类和非静态类重要的区别是在于静态类不能被实例化,也就是说不能使用  new 关键字创建静态类类型的变量,防止程序员写代码来实例化该静态类或者在类的内部声明任何实例字段或方法. 用于存放不 ...

  4. 5.6 NOI模拟

    \(5.6\ NOI\)模拟 明天就母亲节了,给家里打了个电话(\(lj\ hsez\)断我电话的电,在宿舍打不了,只能用教练手机打了) 其实我不是很能看到自己的\(future,\)甚至看不到高三的 ...

  5. 解决前端向后端请求静态资源的问题（基于express框架）

    请求js,css,image资源: 前端 <script src='后端url/assets/js/xxx.js'>,<link href='后端url/assets/css/xxx ...

  6. ceph 005 赋权补充 rbd块映射

    我的ceph版本 [root@serverc ~]# ceph -v ceph version 16.2.0-117.el8cp (0e34bb74700060ebfaa22d99b7d2cdc037 ...

  7. JS判断两个数组的元素是否完全相等

    1.使用ES6 新增的扩展运算符和Set新数据类型判断两个数组是否包含有相同的元素 var arr1 = ['green' , 'yellow' ,'blue' ,'red']; var arr2 = ...

  8. 回溯、贪心、DP的区别和联系

    四大常用算法:分治.贪心.回溯.动态规划 回溯算法是个"万金油".基本上能用跟动态规划.贪心解决的问题,都可以用回溯去解决.回溯算法相当于穷举搜索,穷举所有情况,然后得到最优解.不 ...

  9. CF1450E 资本主义Capitalism（差分约束）

    题面 点此看题 没有永远的朋友,只有永远的利益 在这个黑漆漆的社会上,有 n n n 个布衣百姓,他们在利益驱使下成为金钱的奴隶,看不到属于生活的阳光.在茫茫奔途中,他们相互扶持,结交了有 m m m ...

  10. 造序列（构造，DP）

    题面 Sample Input 7 8 7 10 31 20 100 869120 Sample Output 6 1 1 4 5 1 4 7 1 9 1 9 8 1 0 8 1 9 4 9 1 0 ...