测试博客样式

作者: 李庆雪 | 来源:发表于2018-12-21 23:23 被阅读2次

写在书籍或文章前面的文字。书籍中的前言,刊于正文前,主要说明基本内容、编著(译)意图、成书过程、学术价值及著译者的介绍等。由著译、编选者自撰或他人撰写。文章中的前言,多用以说明文章主旨或撰文目的。也可以理解成所写的东西的 精华版

标题讲解(一级)

是标明文章、作品等内容的简短语句,一般分为总标题、副标题、分标题。常言道:看书先看皮,看报先看题,标题可以使读者了解到文章的主要内容和主旨。

我是一级标题

测试列表(二级)

  • 支持 "标准" Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
  • 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
  • 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
  • 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
  • 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
  • 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
  • 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
  • 支持自定义主题样式;

测试有序列表(三级)

  1. 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
  2. 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
  3. 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
  4. 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
  5. 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;

测试下划线(四级)

下划横线用"---"标识, 效果如下:


测试删除线等(五级)

删除
斜体字
斜体字
粗体
粗体
粗斜体
粗斜体
下标:X2
上标:O2

引用文本 Blockquotes

即<br />标签

普通链接

普通链接带标题

多语言代码高亮 Codes(六级)
  • 行内代码 Inline code

执行命令:npm install marked

  • 编写不同代码(java)
/**
     * map转json字符串
     * @param map
     * @return
     */
    public static String map2Json(Map<String, String> map){
        String jsonStr = JSON.toJSONString(map);
        return jsonStr;
    }
  • JS代码
function test(){
    console.log("Hello world!");
}
 
(function(){
    var box = function(){
        return box.fn.init();
    };

    box.prototype = box.fn = {
        init : function(){
            console.log('box.init()');

            return this;
        },

        add : function(str){
            alert("add", str);

            return this;
        },

        remove : function(str){
            alert("remove", str);

            return this;
        }
    };
    
    box.fn.init.prototype = box.fn;
    
    window.box =box;
})();

var testBox = box();
testBox.add("jQuery").remove("jQuery");
  • HTML代码 HTML codes
<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8" />
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>

预格式化文本:通过缩进tab实现

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

图片 Images

Image:

image

Follow your heart.

image

图为:厦门白城沙滩

图片加链接 (Image + Link):

image

图为:李健首张专辑《似水流年》封面


列表 Lists

无序列表(减号)Unordered Lists (-)

  • 列表一
  • 列表二
  • 列表三

无序列表(星号)Unordered Lists (*)

  • 列表一
  • 列表二
  • 列表三

无序列表(加号和嵌套)Unordered Lists (+)

  • 列表一
  • 列表二
    • 列表二-1
    • 列表二-2
    • 列表二-3
  • 列表三
    • 列表一
    • 列表二
    • 列表三

有序列表 Ordered Lists (-)

  1. 第一行
  2. 第二行
  3. 第三行

GFM task list

  • [x] GFM task list 1
  • [x] GFM task list 2
  • [ ] GFM task list 3
    • [ ] GFM task list 3-1
    • [ ] GFM task list 3-2
    • [ ] GFM task list 3-3
  • [ ] GFM task list 4
    • [ ] GFM task list 4-1
    • [ ] GFM task list 4-2

绘制表格 Tables

项目 价格 数量
计算机 $1600 5
手机 $12 12
管线 $1 234
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
Function name Description
help() Display the help window.
destroy() Destroy your computer!
Left-Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1
Item Value
Computer $1600
Phone $12
Pipe $1

特殊符号 HTML Entities Codes

© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·

X² Y³ ¾ ¼ × ÷ »

18ºC " '

Emoji表情 :smiley:

Blockquotes :star:

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:

  • [x] :smiley: @mentions, :smiley: #refs, links, formatting, and <del>tags</del> supported :editormd-logo:;
  • [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
  • [x] [ ] :smiley: this is a complete item :smiley:;
  • [ ] []this is an incomplete item test link :fa-star: @pandao;
  • [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
    • [ ] :smiley: this is an incomplete item test link :fa-star: :fa-gear:;
    • [ ] :smiley: this is :fa-star: :fa-gear: an incomplete item test link;

反斜杠 Escape

*literal asterisks*

科学公式 TeX(KaTeX)

E=mc^2

行内的公式E=mc^2行内的公式,行内的E=mc^2公式。

\(\sqrt{3x-1}+(1+x)^2\)

\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))

End

相关文章

  • 测试博客样式

    写在书籍或文章前面的文字。书籍中的前言,刊于正文前,主要说明基本内容、编著(译)意图、成书过程、学术价值及著译者的...

  • 样式测试

    周末我组建了“人员招聘与培养机制的优化”相关任务十几个,之后邓欢给我发了个视频,恰巧和董建方以前提到过的是同一个,...

  • 测试博客

    测试博客

  • 基于github和hexo搭建博客----HEXO样式

    博客搭建成了,个人域名也绑定了,是不是觉得博客样式好丑!!!!!!!!!不过hexo很强大,支持多种主题样式从官方...

  • 测试

    一、纯粹用于测试新浪博客发表长微博的效果 纯粹用于测试新浪博客发表纯粹用于测试新浪博客发表长微博的效果纯粹用于测试...

  • 2018-07-08

    测试 测试 测试 测试 测试 测试 测试测试 测试 测试 测试weearc的个人博客 测试 d

  • 薛钧文:不再折腾此博客 2017-12-09

    不会花精力折腾此博客(薛钧文博客:xuejunwen.com),指的是不再改动博客的样式。这个博客(薛钧文博客:x...

  • 2018-10-16展现类界面测试

    布局 样式 兼容性测试

  • 博客小栗子(里面的this指向问题)

    请忽略样式,只讲功能哦