zoukankan      html  css  js  c++  java
  • 博客开篇——应用Markdown编辑器呈现样式和内容

    刚刚开通博客,一直了解Markdown便捷的编写能力,正好博客园支持Markdown编辑器,写此篇练习Markdown的各种[标记]语法。本文内容有参考文章 博客园Markdown编辑器指南

    Markdown编辑器

    • 在未提供Markdown的博客中,通常使用安装好的Markdown编辑软件来编写内容,然后将导出的html文档复制到该博客的内容编辑栏中。常用的工具有MarkdownPad 2和Sublime Text,但MarkdownPad 2 要付费。
    • 笔者使用博客园提供的页面Markdown编辑器来编辑此篇文章。

    使用Markdown语法产出内容

    1.标题

    • “Markdown编辑器”和“使用Markdown语法产出内容”均为一级标题,在内容前加上“#”符号即可生成。
    • “1.标题”为二级标题,在内容前加##生成。
    • 一级、二级、三级标题依次在内容前加入#、##、###、......以此类推。
    • 号与文字之间最好加上一个字符的空格

    2.列表

    • 无序列表只需在文字前加上-或*
      • 西瓜
      • 草莓
      • 橙子
    • 有序列表直接在文字前加1. 2. 3.
      1. 西瓜
      2. 草莓
      3. 橙子
    • 注意符号和文字间空一个字符

    3.引用

    文章开通即为引用格式,除了可以引用别处的内容之外,还可以起到分隔或突显内容的作用。引用格式需要在文字前加>符号。

    这是引用。

    4. 链接

    插入链接的格式为[文字](链接地址),注意]和(之间不要有空格,其中文字部分可以标明链接目的地的大致内容或者文章标题等,如本文开头的链接;链接地址部分直接复制目的站的地址。
    这是我的博客地址的链接

    5.图片

    插入图片类似于插入链接,其格式为![文字](图片地址),若是截图得到的图片直接在内容编辑处的相应位置ctrl+v粘贴,即可出现插入图片的格式,并自动填充相应的地址;
    博客园提供了添加图片的可视化按钮,点击插入图片,选择图片所在的地址,会自动生成相应的格式:
    这是我插入的图片

    6.粗体与斜体

    • 粗体的格式为**包含一段文本(注意是包含,前后都有**);
      使用粗体写一段话
    • 斜体的格式为一个*包含一段文本(前后都有一个*);
      使用斜体写一段话

    注意:不管是粗体格式还是斜体格式,**或*符号与其包含的文字中间都不能含有空格。

    7.表格

    Markdown的表格语法略繁琐,其示例语法如下:

    生成效果如下:

    计划表格

    计划内容 完成情况
    计划一 良好
    计划二 优秀
    计划三 一般

    8. 代码框

    笔者认为,代码框一般用于文字中(如某个段落内),呈现高亮和边框的特点,其格式为在代码段的前后用 符号 包裹,该符号需要输入法切换到英文状态下按Tab上方的按键。 使用tab键可进行代码框的缩进。 这是代码框示例 `

    9. 代码

    代码格式往往用于多行代码自成一块时,其语法为在代码开始行的上方加,同样在结束行的下方加,例如下图格式:

    其显示效果为:

    <ul id="background" class="background"></ul>
    <div class="background-overlay"></div>
    <div class="apps">
    <div class="full"></div>
    <div class="top-bar"></div>
    <div class="top-row">
    <div class="top-left"></div>
    <div class="top-right"></div>
    </div>
    <div class="center"></div>
    <div class="center-below"></div>
    <div class="bottom"></div>
    <div class="bottom-right"></div>
    <div class="bottom-left" id="bottom-left"></div>
    </div>
    <div class="overlay drop-overlay">
    <p>Drop to upload backgrounds <span class="badge plus-badge">PLUS</span></p>
    </div>
    <script src="js/lib.min.js"></script>
    <script src="app/app.min.js"></script>
    

    10.分割线

    分割线的语法为在两个段落/内容之间加***,或者说,你在想要加分割线的地方写上***成单独一行。


    上方是分割线。(不知道为什么分割线效果不好用,试了*、---、___都不行,如果有大佬知道麻烦告诉我一下,提前致谢(๑๑))

    11.公式

    • 该功能需要在博客园后台管理的选项界面勾选启用数学公式支持
    • 行内公式用$符号包括,且公式前加符号,如$sqrt{x^2+y^2}+(y+z)^2$,效果展示:(sqrt{x^2+y^2}+(y+z)^2)
    • 行公式在公式行的上下行加$$符号,且公式前加符号,如:
    $$
    sqrt{x^2+y^2}+(y+z)^2
    $$
    

    效果如下:

    [sqrt{x^2+y^2}+(y+z)^2 ]


    对于Markdown的练习就写这么多,运用Markdown的博客征途才刚刚开始......

    作者:Sandrammm
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,如有问题请联系作者。
  • 相关阅读:
    AtCoder Beginner Contest 169
    Codeforces Round #646 (Div. 2)
    Educational Codeforces Round 88 (Rated for Div. 2)
    Codeforces Round #645 (Div. 2)
    【uoj】【美团杯2020】平行四边形(原根)
    【uoj】【美团杯2020】半前缀计数(后缀自动机)
    Codeforces Round #644 (Div. 3)
    [COI2009] OTOCI
    [AHOI2005] 航线规划
    [P1390] 公约数的和
  • 原文地址:https://www.cnblogs.com/yuea777/p/9378891.html
Copyright © 2011-2022 走看看