有些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 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. mysql查询版本

    系统环境下 :mysql -V; mysql内:select version();

  2. js屏蔽浏览器默认事件

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 先导，对IOC容器的理解

    先导,对IOC容器的理解 通俗的讲就是把你的class类交给spring的IOC容器去管理 需要对该类的属性注入一些值,就可以通过spring提供的xml文件或者注解进行注入 自己使用时在IOC容器工 ...

  4. 从贡献第一个 pr 开始，我的开源之路正式开启

    点击上方蓝字关注我们 1 我是一名开源爱好者 我是李进勇,Github Id:JinyLeeChina,目前就职于政采云,专注于大数据平台及数仓领域,是开源项目爱好者. 2 我与小海豚的不解之缘 记得 ...

  5. 使用二手 gopro 做行车记录仪

    背景 自打开了博客以后,一直在写技术说明文,今天打算写点程序以外的东西换换味口.前段时间在某鱼上以 300 元的价格入手了一套完整的 gopro3+ 运动摄像头,带一张 32G SD 卡,两块备用电池 ...

  6. Vite + TS 项目导入 jQuery 包时报错：Could not find a declaration file

    TypeScript 需要类型标注,当使用第三方库(除 ts 以外写的库,即 js)时,又缺少声明文件,我们需要引用它的声明文件,才能获得对应的代码补全.接口提示等功能.jQuery 不是 TypeS ...

  7. iOS越狱进度，越狱工具，一篇文章搞定

    最新的 iOS 越狱状态 iOS 15.0 – 16.0 Beta 目前无法越狱, Cheyote Jailbreak 正在开发中. iOS 14.6 -> 14.8 目前在某些较新的设备(A1 ...

  8. 【NOI P模拟赛】寻找道路（bfs，最短路）

    题面 一道特殊的最短路题. 给一个 n n n 个点 m m m 条有向边的图,每条边上有数字 0 \tt0 0 或 1 \tt1 1 ,定义一个路径的长度为这个路径上依次经过的边上的数字拼在一起后在 ...

  9. k8s中ingress，service，depoyment，pod如何关联

    k8s中pod通过label标签名称来识别关联,它们的label  name一定是一样的.ingress,service,depoyment通过selector 中app:name来关联 1.查询发布 ...

  10. 如何在 Jenkins CI/CD 流水线中保护密钥？

    CI/CD 流水线是 DevOps 团队软件交付过程的基本组成部分.该流水线利用自动化和持续监控来实现软件的无缝交付.通过持续自动化,确保 CI/CD 流水线每一步的安全性非常重要.在流水线的各个阶段 ...