1 Star 3 Fork 0

Albert钟 / Lineup 标记语言

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
<!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>

空文件

简介

js编译器 支持网页打开时编译 展开 收起
JavaScript 等 3 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/albert_zhong/lineup.git
git@gitee.com:albert_zhong/lineup.git
albert_zhong
lineup
Lineup 标记语言
master

搜索帮助