MarkDown使用小技巧

作者: 唐衣可俊 | 来源:发表于2014-06-19 13:54 被阅读45101次

    写作目的

    笔者看完一些MarkDown入门文字后,发现很多文档对一些容易遇到的细微问题缺少解释。本文意欲稍作补充。

    目标读者

    使用MarkDown仅为了排版出更好看的文章,而不关注技术细节,不懂HTML的用户。


    1、首行缩进

    写文章时,我们常常希望能够首行缩进,这时可以在段首加入 来输入一个空格.加入 来输入两个空格。

    示例

    文本

      一语未了,只听后院中有人笑声,说:“我来迟了,不曾迎接远客!"

    效果

    一语未了,只听后院中有人笑声,说:“我来迟了,不曾迎接远客!"

    2、插入代码

    插入代码的方式有两种

    1. 在每行代码前加入4个空格或者添加一个制表符(TAB键)
    2. 在代码两侧添加三个反引号‘```’。

    两种方法都有需要注意的地方,很多入门文档未能提及。

    2.1 方式1

    其缩进是相对于当前格式状态下的。

    示例

    文本

    • 列表项
    • 列表项
      [TAB][TAB]printf("hello world!");

    效果

    • 列表项
    • 列表项
      printf("hello world!");

    在列表项状态下,需要输入两次TAB键(制表符)才能以代码格式插入。

    2.2 方式2

    反引号最好在代码的前后行添加,而不是直接加在代码两边。

    示例

    文本

    ```
    let 你好 = "swift你好,我叫唐衣可俊"
    println(你好)
    ```

    效果

    let 你好 = "swift你好,我叫唐衣可俊"
    println(你好)

    
    ### 3、添加空行
    添加空行可以结束先前的格式状态。个人建议在改变格式时,均添加一个空行。
    
    ####示例
    
    文本
    
    > \>引用状态
    >[空行]
    > \#\#\#标题状态
    >[空行]
    >\-\-\-\-\-\-
    >[空行]
    > \- 列表状态
    > \- 列表状态
    
    效果
    > >引用状态
    >
    > ###标题状态
    >---
    >
    > - 列表状态
    > - 列表状态
    
    ### 4、限制图片大小并居中
    许多 MarkDown 编辑器中直接按原图大小显示图片,造成版面凌乱。如何让图片像简书中那样大小一致居中显示呢?使用该命令`<img src="图片地址" width="图片显示宽度" height="显示高度" alt="图片名称"/>`设置图片大小,再用`<div align=center></div>`命令包裹达到居中效果。
    
    #### 示例
    
    **文本**
    
    > `<img src="http://ww2.sinaimg.cn/bmiddle/88070423gw1ep30aw8an7g204d04gkgd.gif" width="400" height="400" alt="亦菲表演机器猫"/>`
    
    如果你使用的是 Mou,那么还可以使用如下语法 <u>*!\[名称\](链接地址 =宽x高)*</u>
    
    > !\[亦菲表演机器猫\](http://ww2.sinaimg.cn/bmiddle/88070423gw1ep30aw8an7g204d04gkgd.gif =400x400)
    
    
    &ensp;
    **效果**
    
    > <img src="http://ww2.sinaimg.cn/bmiddle/88070423gw1ep30aw8an7g204d04gkgd.gif" width="400" height="400" alt="亦菲表演机器猫"/>{ImgCap}亦菲表演机器猫{/ImgCap}
    
    
    
    简书中默认就是居中显示,展示的图片大小也是固定的,而且貌似不能使用div标签。。在此仅仅给大家展示下写法,效果就在其他编辑器的预览上看一下好了。
    
    > `<div align=center>
    <img src="http://ww2.sinaimg.cn/bmiddle/88070423gw1ep30aw8an7g204d04gkgd.gif" width="400" height="400" alt="亦菲表演机器猫"/>
    </div>`
    
    ### 4、其他
    
    - 普通段落尽量不用空格或制表符来缩进,即使使用它们后得到的效果看似是对的。
    
    - [数字] + ‘.’ + [空格] 的形式会呼出有序的项目列表。因此如果你在正文中恰好出现这种形式,那么可以在‘.’的前面加上‘\’来避免出现有序列表。
    
    ---
    2014/6/19
    
    转载请注明出处,谢谢!

    相关文章

      网友评论

      • 云中瑞麟:文字居中和文字呈灰色怎么实现?
      • 十二右:单行转换成代码格式是在行首2个Tab键,实测是这样不知道其他书友是否也是一样?
      • ef31668cae8d:谢谢!我就是“目标用户”之一哈哈
      • 默写年华Antifragile:请问楼主知道怎么修改简书中的字体大小和颜色吗?
        <font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
        网上的这个不行
        唐衣可俊:简书不允许内嵌 html ,我猜测更改里面的字体大小和颜色会破坏简书的一致性,让页面保持简洁吧
      • GodyZ:试了下gif图没法改变大小呀
        唐衣可俊:简书里面图片的大小是固定的,文章里面说了哟~
      • 姬磊:我能问一下文字如何居中吗?
        一个大西瓜233:@佳小豆 可以用这种方式<center>文字</center>,如果你有别的方式可以分享一下,谢谢~
        佳小豆:你解决了吗?我也遇到了同样的问题
      • lekenny:简书里面插入代码是哪个呢?我用反引号没有效果啊
      • HanOBa:好人一生平安。
      • 谢聃:之前在找首行缩进,终于在你这里找到了,谢谢
      • 豆志昂扬:<img src="http://ww2.sinaimg.cn/bmiddle/88070423gw1ep30aw8an7g204d04gkgd.gif&quot; width="400" height="600" alt="亦菲表演机器猫"/>

        这样设置在简书内没有效果,大小不会变化。
        豆志昂扬:@唐衣可俊 我的意思是设置图片大小在简书里是没有效果的。
        唐衣可俊:@豆志昂扬 简书中默认就是居中显示,展示的图片大小也是固定的,而且不能使用div标签。。在此仅仅给大家展示下写法,效果就在其他编辑器的预览上看一下好了。
      • Purlible:我是想知道 如何文字标题居中啊!
        东方一号蓝:一般是不会开启标签解析的,防止漏洞。markdown语法貌似除了标签解析,无法实现标题居中。有点难受
        Purlible:@唐衣可俊 好的 谢了!
        唐衣可俊:@Dalvk丶藏蓝 简书里面似乎是不行的,可能是出于一致性的考虑。
        如果是在其他markdown编辑器里面,可以直接使用 HTML 语法中的 align (对齐)属性:<h1 align="center">This is heading 1</h1> ,这里的 h1 等价于一级标题。
      • 鲤伴Kevin:请教下楼主,为什么我使用div包裹img的时候,图片可以居中并控制大小,但是上下的文本段落用markdown定义的格式全都没了?
        唐衣可俊:@鲤伴Kevin @罗永慧 你们用的什么编辑器? 简书不支持使用 div 的哟
        罗永慧:@鲤伴Kevin 我也遇到了相同的问题,不知道仁兄是如何解决的?
      • 烤鱼吃辣椒:讲了最近遇到的很多细节,暂
      • 郑哲明:感谢楼主。首行缩进还有一种更简单的办法:shift+空格可以将输入法从半角切换至全角,此时可以在markdown编辑器中输入空格,每个空格正好一个汉字宽度,首行缩进只需键入2下空格即可。
      • Mooner_guo:可以的
        Mooner_guo:@唐衣可俊 已经在用markdown了:joy::joy:
        唐衣可俊:@Mooner_guo 谢谢!
      • 2432b63b39f5:O(∩_∩)O谢谢,对我帮助很大!
      • HYY:好实用,多谢了
      • 唐衣可俊:@rico93 客气啥,啦啦
      • rico93:谢了哈 拉拉

      本文标题:MarkDown使用小技巧

      本文链接:https://www.haomeiwen.com/subject/ldkjtttx.html