有些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 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. 20220722-Java中this关键字

    this关键字知识总结 学习资源:B站韩顺平老师Java入门教学 代码示例1 public class This01 { public static void main(String[] args) ...

  2. GRPC头测试记录

    GRPC头记录 http://nodejs.cn/api/http2/note_on_authority_and_host.html https://cloud.tencent.com/develop ...

  3. 一个小 Trick

    平方变两次 一个状态 \(S\) 有一个贡献,所有状态 \(S\) 组成集合 \(U\) . 然后我们要统计下面这个东西 \[ans=\sum_{S\in U}f^2(S) \] 然后我们就可以看作是 ...

  4. Fibonacci Nim

    目录 题意 题解 相关 Ref 题意 [COCI2010-2011#4] HRPA 取石子,但是: 先手第一次可取任意多个石子 此外每次可取的石子的个数,至少为 \(1\) ,至多为上一轮对方所取个数 ...

  5. SpringBoot定时任务 - 开箱即用分布式任务框架xxl-job

    除了前文介绍的ElasticJob,xxl-job在很多中小公司有着应用(虽然其代码和设计等质量并不太高,License不够开放,有着个人主义色彩,但是其具体开箱使用的便捷性和功能相对完善性,这是中小 ...

  6. mosquitto使用的基本流程以及一些遇见的问题

    改配置文件 以记事本的方式打开mosquitto.conf更改部分内容,找到# listener port-number [ip address/host name/unix socket path] ...

  7. LuoguP5390 [Cnoi2019]数学作业(数论)

    转进制,然后发现贡献只有\(1_{(2)}\),取奇数个的子集方案是\(2^{n-1}\) #include <iostream> #include <cstdio> #inc ...

  8. LINUX下基于NVIDIA HPC SDK 的 VASP6.3.x编译安装报错整理

    关于gcc 用旧版本安装NVIDIA HPC SDK再编译会报错: "/opt/rh/devtoolset-8/root/usr/include/c++/8/bits/move.h" ...

  9. 解决linux下U盘变成只读模式

    在最近的一个项目里,需要将linux下的些文件拷贝出来.插入U盘后,发现是只读模式. U盘可以写出,不能写入. 折腾了一翻: 最后这样解决的: 将U盘插入到windows下 执行 chkdsk g: ...

  10. [题解]Balance

    1.题目 POJ-1837 2.题目大意 一个天平上有一些钩子,现在有一些砝码.给出每个钩子到原点(姑且这么叫吧)的距离(-15 ~ 15,负数代表在左边,正数相反)以及砝码的重量(1 ~ 20),求 ...