Lineup 语言简介和教程

内容由Lineup前端编译器生成 经过修改

关于Lineup

由AlbertZ原创开发的简单、优雅、轻量、开放的标记语言。可以运用在前段开发、富文本写作等场景，支持在HTML直接引入，替代HTML的大量功能。

为什么选择Lineup？

简单：语法单一简单，特殊符号少，嵌套自然，无论有无编程基础都能快速上手
优雅：类似YAML和Python的设计原则，强制缩进，大量减少HTML代码的重复点
轻量：仅8kB的编译器核心，用JavaScript编写，同时支持前段和后端，可直接植入网页进行开发
开放：开源项目，支持二次创作，语法可扩展，仅修改常量文件就能定制出自己的编译器

下载和使用

可以在 https://gitee.com/albert_zhong/lineup 下载Lineup最新版本的源代码。

以在HTML文件中引用为例。将所有源代码置于HTML文件的同一层级。在文件中body标签最后以module形式引入lineup.js，并编译所有dom内容。

<script type="module"> 
    import * as Lineup from './lineup.js';
    Lineup.compileDocument(); 
</script>

之后即可在script标签以上的部分的lineup标签内直接插入Markup代码。打开页面时，编译器会自动将markup标签内的内容转化为HTML。这个过程几乎没有耗时。

<lineup>#(1) TEST HEADING</lineup>

lineup.js和compile.js中还提供了生成语法树、组合HTML、编译成字符的底层和封装函数，可以在前端或Node.js中导入并调用。

Lineup语法

元素定义

元素定义的基本语法为 元素名(参数) 内容 。其中参数是可选的，但必须保留圆括号。元素名和内容是必须的。元素名仅可以是Lineup支持的元素。内容部分不得留空，元素必须在一行内完成定义，否则可能导致编译错误。

#(1) TEST HEADING
p(class:content) THE CONTENT

一般情况下，Lineup元素名与html标签名称相同。但对于常用标签，为了便于理解记忆，引入了特殊符号和不同的文字表达。具体对应关系如文末常量信息对象。

参数属性

参数的基本语法为 默认属性值，属性名：属性值，属性名：属性值... 。默认属性名可以写出，也可以不写出。每个元素至多有一个默认属性。顺序对编译没有影响，但推荐将默认属性写在首个。 ‘@”!”audio”video’元素有默认属性’link’，’#’元素有默认属性’size’，对应1-6的数字，表示标题层级。

#(2,class:name) TEST HEADING
@(link:#anchor) TEST ANCHOR
p(id:test,style:"color:red") THE CONTENT

特殊符号

一般的字符串无需也不推荐使用引号引用。内容部分不可以使用引号。对于包含有特殊字符（如’:’）的属性值，需要使用单引号或双引号引用。例如：

@("https://www.baidu.com") TEST ANCHOR

嵌套语法

在Lineup中，需要用嵌套标识符’\’（反斜杠）和缩进同时表示嵌套关系。缩进符号只支持四个空格，无法使用制表符或两个空格。

嵌套标识符’\’表示嵌套的开始。在父级元素的内容部分使用这一符号。需要注意，标识符前只可以为空格，标识符后不能有任何字符（包括空格），否则编译器可能无法识别。

在需要被嵌套的子元素前增加一次缩进层级。嵌套的结束之处无需标识，只需要减少一次缩进层级。需要注意，缩进是强制的，但编译器不会做缩进检查。不正确的缩进可能导致意想不到的错误。

div() \    
    #(1) THE HEADING    
    p() \        
        @(#anchor) TEST ANCHOR    
    p() CONTENT
div() FOOTER

附：元素名称对象

const ordinaryElements = {
    '@': 'a',
    '#': 'h',
    '!': 'img',
    '+': 'br',
    '-': 'hr',
    'audio': 'audio',
    'video': 'video',
    'bold': 'b',
    'italic': 'i',
    'under': 'u',
    'abbr': 'abbr',
    'address': 'address',
    'area': 'area',
    'bdi': 'bdi',
    'bdo': 'bdo',
    'cite': 'cite',
    'button': 'button',
    'canvas': 'canvas',
    'caption': 'caption',
    'code': 'code',
    'col': 'col',
    'del': 'del',
    'div': 'div',
    'dialog': 'dialog',
    'embed': 'embed',
    'figure': 'figure',
    'footer': 'footer',
    'form': 'form',
    'header': 'header',
    'iframe': 'iframe',
    'input': 'input',
    'label': 'label',
    'main': 'main',
    'map': 'map',
    'noscript': 'noscript',
    'object': 'object',
    'p': 'p',
    'pre': 'pre',
    'select': 'select',
    'span': 'span',
    'sub': 'sub',
    'sup': 'sup',
    'svg': 'svg',
    'time': 'time',
    'title': 'title',
    'style': 'style',
    'script': 'script',
    'ul': 'ul',
    'li': 'li',
    'ol': 'ol',
    'table': 'table',
    'cell': 'td',
    'row': 'tr',
    'headcell': 'th',
};