实现快捷生成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