實現快捷生成HTML代碼

ublime / vscode 快捷生成HTML代碼的實現

文章目錄

1.基本html結構

2.生成div加類名的快捷鍵

3.帶類名的div

4.帶id的div

5.屬性【】

6.后代>

7.兄弟+

8.上級^

9.乘法*

10.文本{}

1、基本html結構

操作：輸入 !+Enter鍵

注意：這里輸入“！”+回車鍵前，需要清空原來生成的基本結構

實現效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     
</body>
</html>

2、生成div加類名的快捷鍵

操作：輸入 div.list>div.item_$*6

實現效果：

<div class="list">
    <div class="item_1"></div>
    <div class="item_2"></div>
    <div class="item_3"></div>
    <div class="item_4"></div>
    <div class="item_5"></div>
    <div class="item_6"></div>
</div>

3、帶類名的div

操作：輸入 div.wrapper

實現效果：

<div class="wrapper"></div>

4、帶id的div

操作： div#wrapper

實現效果：

<div id="wrapper"></div>

5、屬性 []

操作： span[title=“test”]

實現效果：

<span title="test"></span>

6、后代 >

操作：輸入div>span>a

實現效果：

<span title="test"></span>

7、兄弟 +

操作： div+p+span

實現效果：

<div></div>
<p></p>
<span></span>

8、上級 ^

操作： div>span^i

實現效果：

<div><span></span></div>
<i></i>

9、乘法 *

操作： ul>li*2

實現效果：

<ul>
    <li></li>
    <li></li>
</ul>

10、文本 {}

操作： div>span{這是文本}

實現效果：

<div><span>這是文本</span></div>

章中，我介紹了一種使用類似CSS的選擇器語法的快速編寫HTML代碼的新方法-一組用于高速HTML和CSS編碼的便捷工具。

您花費多少時間編寫HTML代碼：所有這些標記，屬性，引號，花括號等。如果您選擇的編輯器具有代碼補全功能，則您會更輕松，但是您仍然需要進行大量鍵入操作。

但是，如果您不僅可以使用CSS選擇器來樣式化和訪問元素，還可以生成代碼怎么辦？例如，如果您可以寫這個呢？

										div#content>h1+p

…并將其視為輸出？

現在，讓我們看看這些工具是如何工作的。

展開縮寫

擴展縮寫功能將類似CSS的選擇器轉換為XHTML代碼。術語“縮寫”可能有些混亂。為什么不將其稱為“ CSS選擇器”呢？好吧，第一個原因是語義上的：“選擇器”意味著選擇某些內容，但是在這里，我們實際上是在生成某些內容，編寫了較長代碼的較短表示。其次，除了引入一些新的運算符之外，它僅支持真正的CSS選擇器語法的一小部分。

以下是受支持的屬性和運算符的列表：

E元素名稱（div，p）;
E·ID元素具有標識符（div#content，p#intro，span#error）;
E.class使用類的元素（div.header，p.error.critial）。您可以結合類和ID，也：div#content.column.width;
E> N子元素（div>p，div#footer>p>span）;
E + N同級元素（h1+p，div#header+div#content+div#footer）;
E * N元素乘法（ul#nav>li*5>a）;
E $ * N項目編號（ul#nav>li.item-$*5）；

如您所見，您已經知道如何使用：只需編寫一個類似CSS的簡單“縮寫”，就像這樣……

							div#header>img.logo+ul#nav>li*4>a

…然后調用“擴展縮寫”操作。

有兩個自定義運算符：元素乘法和項目編號。例如，如果要生成五個<li>元素，則只需編寫li*5。它將重復所有后代元素。如果您需要四個<li>元素，<a>每個元素中都有一個，則只需編寫li*4>a，它將生成以下輸出：

當您想用其索引標記重復的元素時，使用最后一個項目編號。假設你想生成三個<div>的元素item1，item2和item3類。您可以寫這個縮寫div.item$*3：

只需在要顯示索引的class或ID屬性中的任意位置添加一個美元符號，即可。所以這…

 div#i$-test.class$$$*5

將被轉換為：

您會看到在輸入a縮寫時，輸出為<a href=“”></a>。或者，如果您編寫img，輸出為<img src=“” alt=“” />。

本人從事web前端5年，現在從事在線教育，準備了整理了一套適合小白學習資料免費分享給大家，想要的朋友可以私信 1

些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。

花了一點時間研究了一下各家的編輯器，規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進，或者丟失顏色樣式。

所以，這就難了。先得找個支持代碼高亮的編輯器，仔細地選擇并復制代碼塊，復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。

因為瀏覽器操作系統剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。

先看軟件成品演示：

軟件用法：

1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉換的編程代碼。
3、點擊「復制高亮代碼塊」按鈕。

然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

下面是這個軟件的 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 代碼塊』就可以了：

在線咨詢

上一篇：html5+css3實現特殊網頁效果11例
下一篇：使用canvas實現簡單的貪吃蛇游戲，html+css+js

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

實現快捷生成HTML代碼

ublime / vscode 快捷生成HTML代碼的實現

文章目錄

1、基本html結構

操作： 輸入 !+Enter鍵

實現效果：

2、生成div加類名的快捷鍵

操作： 輸入 div.list>div.item_$*6

實現效果：

3、帶類名的div

操作： 輸入 div.wrapper

實現效果：

4、帶id的div

操作： div#wrapper

實現效果：

5、屬性 []

操作： span[title=“test”]

實現效果：

6、后代 >

操作： 輸入div>span>a

實現效果：

7、兄弟 +

操作： div+p+span

實現效果：

8、上級 ^

操作： div>span^i

實現效果：

9、乘法 *

操作： ul>li*2

實現效果：

10、文本 {}

操作： div>span{這是文本}

實現效果：

展開縮寫

您的項目需求

操作：輸入 !+Enter鍵

操作：輸入 div.list>div.item_$*6

操作：輸入 div.wrapper

操作：輸入div>span>a