1. 首頁 > 生活百科 > >

一鍵生成通用高亮代碼塊到剪貼板，快捷粘貼兼容 TT/WX/BJ 編輯器

生活百科

有些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 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=https://www.huyubaike.com/biancheng/"prism.css" rel="stylesheet" />

推薦閱讀