# Lineup 标记语言
**Repository Path**: albert_zhong/lineup
## Basic Information
- **Project Name**: Lineup 标记语言
- **Description**: js编译器 支持网页打开时编译
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-12-28
- **Last Updated**: 2023-07-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#(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() <script type="module"> import * as Lineup from './lineup.js'; Lineup.compileDocument(); </script>
p() 之后即可在script标签以上的部分的Lineup标签内直接插入Lineup代码。打开页面时，编译器会自动将Lineup标签内的内容转化为HTML。这个过程几乎没有耗时。
pre() \
code() <lineup>#(1) TEST HEADING</lineup>
p() lineup.js和compile.js中还提供了生成语法树、组合HTML、编译成字符的底层和封装函数，可以在前端或Node.js中导入并调用。
p() 如果想要避免不必要的cors问题和import不支持的问题，建议使用lineup-min.js的纯代码版本（推荐）。代码由作者自己编写的link.py插件生成，完全等价于module版本。用以下代码导入：
pre() \
code() <script src="lineup-min.js"></script><script>Lineup.compileDocument(); </script>
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() #(2,class:name) TEST HEADING@(link:#anchor) TEST ANCHORp(id:test,style:"color:red") THE CONTENT
#(3) 特殊符号
p() 一般的字符串无需也不推荐使用引号引用。内容部分不可以使用引号。对于包含有特殊字符（如':'）的属性值，需要使用单引号或双引号引用。例如：
pre() @("https://www.baidu.com") TEST ANCHOR
#(3) 嵌套语法
p() 在Lineup中，需要用嵌套标识符'\'（反斜杠）和缩进同时表示嵌套关系。缩进符号只支持四个空格，无法使用制表符或两个空格。
p() 嵌套标识符'\'表示嵌套的开始。在父级元素的内容部分使用这一符号。需要注意，标识符前只可以为空格，标识符后不能有任何字符（包括空格），否则编译器可能无法识别。
p() 在需要被嵌套的子元素前增加一次缩进层级。嵌套的结束之处无需标识，只需要减少一次缩进层级。需要注意，缩进是强制的，但编译器不会做缩进检查。不正确的缩进可能导致意想不到的错误。
pre() div() \ #(1) THE HEADING p() \ @(#anchor) TEST ANCHOR p() CONTENTdiv() FOOTER
#(3) 内联元素
p() \
() 内联元素的基本语法为 {code() \{ 元素定义式 \}}。其他内容中若有'\{'或'\}'符号，必须用'\'转义。
pre() { code() 内联语法示例 \{ p() 这是一段代码 \} }
附：常量信息
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 = ' ';