有些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 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. 关于Request复用的那点破事儿。研究明白了，给你汇报一下。

    你好呀, 我是歪歪. 之前不是发布了这篇文章嘛:<千万不要把Request传递到异步线程里面!有坑!> 说的是由于 Request 在 tomcat 里面是复用的,所以如果在一个 Requ ...

  2. WindTerm：新一代开源免费的终端工具，GitHub星标6.6k+，太酷了！

    继 Tabby.Warp 后,今天再来给大家推荐一款终端神器--WindTerm,完全开源,在 GitHub 上已经收获 6.6k 的 star. https://github.com/kingToo ...

  3. Less混合结合:nth-child()选择器的高级玩法

    1.先看效果图 上图中比较麻烦的是每块的底色处理,下面看怎么处理 2.:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型. n 可以是数字.关键词或公式. 数字:最 ...

  4. 技术分享 | Prometheus+Grafana监控MySQL浅析

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 简介 Prometheus 一套开源的监控&报警&时间序列数据库的组合,通常 Kubernetes 中都会 ...

  5. Python-基础学习-第二轮

    目录 数据类型 文件 自调用其他程序 os.system函数 os.startfile 函数 subprocess 模块 线程和进程 创建新线程 共享数据的访问控制 deamon线程 多线程 JSON ...

  6. 羽夏看Linux内核——引导启动（上）

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后面,并 ...

  7. Blazor和Vue对比学习（知识点杂锦3.04）：Blazor中C#和JS互操作（超长文）

    C#和JS互操作的基本语法是比较简单的,但小知识点特别多,同时,受应用加载顺序.组件生命周期以及参数类型的影响,会有比较多坑,需要耐心的学习.在C#中调用JS的场景会比较多,特别是在WASM模式下,由 ...

  8. dentry的引用计数不对导致的crash

    [17528853.189372] python invoked oom-killer: gfp_mask=0xd0, order=0, oom_score_adj=-998[17528853.189 ...

  9. 「学习笔记」倍增思想与lca

    目录 ST表 算法 预处理 查询 关于 log2 Code 预处理 查询 例题 P2880 P2048 lca 树上 RMQ 前置知识:欧拉序列 算法 Code 离线 Tarjan 算法 Code 倍 ...

  10. 基于ASP.NET Core 6.0的整洁架构

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 本节将介绍基于ASP.NET Core的整洁架构的设计理念,同时基于理论落地的代码 ...