有些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 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. PHP生成器yield使用示例

    <?php function getLines($file) { $f = fopen($file, 'r'); try { while ($line = fgets($f)) { yield ...

  2. ABP 6.0.0-rc.1的新特性

      2022-07-26官方发布ABP 6.0.0-rc.1版本,本文挑选了几个新特性进行了介绍,主要包括LeptonX Lite默认主题.OpenIddict模块,以及如何将Identity Ser ...

  3. vue中vuex实现持久化的几种方法

    前提:大家都知道vuex真的数据共享是不持久的,例如登录后一刷新,state中存的token就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...

  4. 将 Word 文本转换为表格

    文本转换为表格的功能,首先点击"插入"选项卡"表格"组中的"表格"下拉按钮,打开下拉列表中选择"文本转换成表格"选项.

  5. [WPF]使用DispatcherUnhandledException捕捉未经处理的异常

    使用DispatcherUnhandledException捕捉未经处理的异常 using System.Windows; namespace Test02 { /// <summary> ...

  6. java中list集合的几种去重方式

    public class ListDistinctExample { public static void main(String[] args) { List<Integer> list ...

  7. 【NOI P模拟赛】校门外歪脖树上的鸽子（树链剖分）

    题面 2 ≤ n ≤ 2 × 1 0 5 , 1 ≤ m ≤ 2 × 1 0 5 , 1 ≤ l ≤ r ≤ n , 1 ≤ d ≤ 1 0 8 2 ≤ n ≤ 2 × 10^5,1 ≤ m ≤ 2 ...

  8. 【java】学习路线11-四种权限修饰的测试

    package com.remoo.test;public class Learn09_Test{    private static String welcomeWord1 = "你好,p ...

  9. 完全彻底的卸载MySQL5.7.35

    最开始接触计算机的时候关于MySQL卸载的这个问题,导致我重装了一次系统.就在今天我又遇到了同样的问题. Setp①: 想要安装新的数据库软件必须要先彻底且干净的删除掉以前的数据库. 第一步要做的是停 ...

  10. 一种比css_scoped和css_module更优雅的避免css命名冲突小妙招

    css_scoped 与 css_module 我们知道,简单的class名称容易造成css命名重复,比如你定义一个class: <style> .main { float: left; ...