Lineup 标记语言: js编译器支持网页打开时编译

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
        <script src="lineup-min.js"></script>
    </head>
    <body>
        <lineup style="display: none;">
            #(1) README
            italic() 内容由Lineup前端编译器生成

            #(2) 关于Lineup
            p() 由AlbertZ原创开发的简单、优雅、轻量、开放的标记语言。可以运用在前段开发、富文本写作等场景，支持在HTML直接引入，替代HTML的大量功能。
 
            #(2) 为什么选择Lineup？
            ul() \
                li() 简单：语法单一简单，特殊符号少，嵌套自然，无论有无编程基础都能快速上手
                li() 优雅：类似YAML和Python的设计原则，强制缩进，大量减少HTML代码的重复点
                li() 轻量：仅8kB的编译器核心，用JavaScript编写，同时支持前段和后端，可直接植入网页进行开发
                li() 开放：开源项目，支持二次创作，语法可扩展，仅修改常量文件就能定制出自己的编译器

            #(2) 下载和使用
            p() 可以在{ @("https://gitee.com/albert_zhong/lineup", target:new) https://gitee.com/albert_zhong/lineup }下载Lineup最新版本的源代码。
            p() \
                () 以在HTML文件中引用为例。将所有源代码置于HTML文件的同一层级。在文件中body标签最后以module形式引入Lineup.js，并编译所有dom内容。
                () 本站长期提供cdn链接（{@("http://lib.albertz.top/lineup/lineup.js", target:new) http://lib.albertz.top/lineup/lineup.js }），使用可以避免CORS问题。
            pre() \
                code() &lt;script type="module"&gt; import * as Lineup from './lineup.js'; Lineup.compileDocument(); &lt;/script&gt;
            p() 之后即可在script标签以上的部分的Lineup标签内直接插入Lineup代码。打开页面时，编译器会自动将Lineup标签内的内容转化为HTML。这个过程几乎没有耗时。
            pre() \
                code() &lt;lineup&gt;#(1) TEST HEADING&lt;/lineup&gt;
            p() lineup.js和compile.js中还提供了生成语法树、组合HTML、编译成字符的底层和封装函数，可以在前端或Node.js中导入并调用。
            p() 如果想要避免不必要的cors问题和import不支持的问题，建议使用lineup-min.js的纯代码版本（推荐）。代码由作者自己编写的link.py插件生成，完全等价于module版本。用以下代码导入：
            pre() \
                code() &lt;script src="lineup-min.js"&gt;&lt;/script&gt;&lt;script&gt;Lineup.compileDocument(); &lt;/script&gt;
            p() 本站长期提供cdn链接（{@("http://lib.albertz.top/lineup/lineup-min.js", target:new) http://lib.albertz.top/lineup/lineup-min.js }）。

            #(2) Lineup语法

            #(3) 元素定义
            p() \
                () 元素定义的基本语法为 { code() 元素名(参数) 内容 }。
                () 其中参数是可选的，但必须保留圆括号。元素名是可选的，默认为span。内容是必须的。元素名仅可以是Lineup支持的元素。内容部分不得留空，元素必须在一行内完成定义，否则可能导致编译错误。
            pre() { code() #(1) TEST HEADING }{ code() p(class:content) THE CONTENT }{ code() () inline }
            p() 一般情况下，Lineup元素名与html标签名称相同。但对于常用标签，为了便于理解记忆，引入了特殊符号和不同的文字表达。
            @(#ele-table) 具体对应关系如文末常量信息对象。

            #(3) 参数属性
            p() \
                () 参数的基本语法为 {code() 默认属性值，属性名：属性值，属性名：属性值...}。
                () 默认属性名可以写出，也可以不写出。每个元素至多有一个默认属性。顺序对编译没有影响，但推荐将默认属性写在首个。
                () '@''!''audio''video'元素有默认属性'link'，'#'元素有默认属性'size'，对应1-6的数字，表示标题层级。
            pre() <code>#(2,class:name) TEST HEADING</code><code>@(link:#anchor) TEST ANCHOR</code></code><code>p(id:test,style:"color:red") THE CONTENT</code>

            #(3) 特殊符号
            p() 一般的字符串无需也不推荐使用引号引用。内容部分不可以使用引号。对于包含有特殊字符（如':'）的属性值，需要使用单引号或双引号引用。例如：
            pre() <code>@("https://www.baidu.com") TEST ANCHOR</code>

            #(3) 嵌套语法
            p() 在Lineup中，需要用嵌套标识符'\'（反斜杠）和缩进同时表示嵌套关系。缩进符号只支持四个空格，无法使用制表符或两个空格。
            p() 嵌套标识符'\'表示嵌套的开始。在父级元素的内容部分使用这一符号。需要注意，标识符前只可以为空格，标识符后不能有任何字符（包括空格），否则编译器可能无法识别。
            p() 在需要被嵌套的子元素前增加一次缩进层级。嵌套的结束之处无需标识，只需要减少一次缩进层级。需要注意，缩进是强制的，但编译器不会做缩进检查。不正确的缩进可能导致意想不到的错误。
            pre() <code>div() \</code><code>&emsp;&emsp;&emsp;&emsp;#(1) THE HEADING</code></code><code>&emsp;&emsp;&emsp;&emsp;p() \</code><code>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;@(#anchor) TEST ANCHOR</code><code>&emsp;&emsp;&emsp;&emsp;p() CONTENT</code><code>div() FOOTER</code>

            #(3) 内联元素
            p() \
                () 内联元素的基本语法为 {code() \{ 元素定义式 \}}。其他内容中若有'\{'或'\}'符号，必须用'\'转义。
            pre() { code() 内联语法示例 \{ p() 这是一段代码 \} }

        </lineup>
        <a id="ele-table"><h3>附：常量信息</h3></a>
        <pre>
            <code>
const ordinaryElements = {
    '@': 'a',
    '#': 'h',
    '!': 'img',
    '+': 'br',
    '-': 'hr',
    'bold': 'b',
    'italic': 'i',
    'under': 'u',
    'cell': 'td',
    'row': 'tr',
    'headcell': 'th',
};
const notSupportedElements = [];
const ordinaryElementsDefault = {
    '#': 'size',
    '@': 'link',
    '!': 'link',
    'audio': 'link',
    'video': 'link',
};
const argNameTranslate = {
    '@': {'link': 'href'},
    '!': {'link': 'src'},
    'audio': {'link': 'src'},
    'video': {'link': 'src'},
};
const argValueTranslate = {
    '@': {'target': {'new': '_blank', 'self': '_self'}}
};
const defaultTagname = 'span';
const argsSplitSymbol = ',';
const argsDefineSymbol = ':';
const nestingSymbol = '\\';
const indentSymbol = '    ';
            </code>
        </pre>
        <script>
            Lineup.compileDocument();
            document.addEventListener('DOMContentLoaded', (event) => {
                document.querySelectorAll('code').forEach((el) => {
                    hljs.highlightElement(el);
                });
            });
        </script>
    </body>
</html>

Albert钟/Lineup 标记语言

简介

发行版

贡献者

近期动态