Mardown 技巧与 Mac 上的写作软件

一:内嵌简单的 html/css 丰富 Markdown 表现力


Markdown (简称 md 为了环保,后文中都用 md 代替)已经逐渐成为文档编写的主要手段,md 用及其简单的标记符号就能写出排版优秀的富文本文档,学习成本也非常低,不夸张的说,10 分钟就可以熟练掌握。如果你还没用 Markdown 写过文章,建议去 maxiang.info (马克飞象,一个在线的 md 编辑网站),练个 10 分钟,然后再来看这篇教程,这篇教程假设你已经熟练掌握了 md 的常用写法;因为 md 对 html 的整合支持,所以可以通过内嵌简单 html 来丰富 md 文档。最后做个声明,我对 html/css 只是知道点皮毛,但是不妨碍我写丰富的 md;

标题居中/右显示

你一定已经注意到,使用 ##.. 标记出来的标题,默认都是居左的,无论你在前面输入多少空格,它已久岿然不动的居左,因为 md 就是对 html 的整合,html 会忽略输入的所有空格(全角空格除外)和换行;更确切的说,# 其实表示的是 html 中的 <h1> 标签。


'#' 表示 <h1> 标签
'##' 表示 <h2> 标签
'###' 表示 <h3> 标签
...
'######' 表示 <h6> 标签

所以如果你想让某个级别的标题居中,可以在 md 文档开头切入一点 css 样式:

  <style>
    h2{
      text-align:center;
    }
  </style>

  <!-- 接下来,你所有用 '##' 标记出来的标题都居中了,center 改为 right,就居右了;-->

被 style 标签包含的内容就是样式了,在 md 中内嵌样式,不会显示出来,也不会占任何空行。

如果你只是想让某个 ## 标题居中,而不是全部,那么只能通过 h2 标签来代替 ## 的写法了,如下:

<h2 style="text-align:center">我是二级居中的标题<h2>

<!-- 其他级别 h3/4/5/6 标题通用 -->

给文字上色/修改字号...

md 可以用 *斜体***粗体** 语法快速实现文字的斜体和粗体,但是没有现成的标记语法来改变文字的字体和颜色,这时候可以使用 span 标签(span标签自身是没有任何特殊效果的标签,目的就是用来标记一段内容)来简单的实现,比如下边这段富文本: 我是一段颜色的富文本示例。 md 源文件中是这样写的:

<span style="color:purple">我是一段</span><span style="color:#a33">颜色</span><span style="font-size:30px"></span>
<span style="font-size:12px"></span>
的富文本示例。

<!--ps: 当然,如果你学过一些 html/css 知识,span 的样式也可以用 id 或者 类选择器实现;
为了便于阅读我把每个标签对做了换行,实际写的时候写成一行。-->

调整分割线粗细

---可以在 md 中画出一条分割线,不过在某些网站分割线显示比较粗;在 html 中分割线的是一个单标签 <hr/>;使用起来也没有比 --- 复杂很多,并且可以通过也是控制分割线的粗细:

<hr style="height:1px" />

这样可以画出一条比较细的分割线。

段落开头的空格

     md 的正文一般情况无法通过键盘上的空格键输入空格,正文的文字都是居左的,因为 html 忽略了空格;这时我们可以通过以下 3 种方法解决;

  1. 使用 html 中表示空格的字符 &nbsp;,需要注意一定要有分号;
  2. 把输入法切换为中文全角,然后再键入空格键;(这种方式不是总生效)
  3. <p>标签加样式:
    <style>
     p{
       text-indent:2em;
     }
    </style>
    <!-- 2em 可以根据自己的需要调节;-->
    

增加换行

md 中段落与段落或与其他标签之间换行的操作是 空格 + 空格 + 回车,但是和空格类似,md 中我们无法通过键盘 Enter键 来增加多余的换行;同样我么你可以通过内嵌 html 的 <br/> 标签来实现换行。

图片大小与位置

![图片描述](图片链接)是 md 中用来显示图片的语法,对应的 html 标签是 <img>,通过 <img><p> 标签来实现图片的展示,我们可以实现更为丰富的表现力。

一:调整图片大小:图片调整小markdown可以和谐的和文字放到同一行,具体方式是在 img 标签中使用 width 属性:

<img src="http://img.xiaobotalk.cn/macSkills/markdown_01.png" width="5%" alt="markdown"/>
<!-- ps:用 width 调整图片的大小;src 后写上图片的资源路径。-->

二:调整图片居中样式,例如下边这张居中的图片:

markdown

md 源码:

<p style="text-align:center;">
<img src="http://img.xiaobotalk.cn/macSkills/marddown_01.png" width="20%" alt="markdown" />
</p>
<!-- ps: 这里的做法是把 img 标签作为 p 的子标签,然后调整 p 标签的内容居中样式,当然也可以居右。-->

三:图文共处一行(区域大小会跟随图片大小变化而变化): 当然这种比较复杂了,毕竟 md 的初衷就是简化富文本书写;是否使用,自己取舍。

markdown 图片居右,文字在左,示例, 图片居右,文字在左,示例,图片居右,文字在左,示例, 图片居右,文字在左,示例,图片居右,文字在左,示例, 图片居右,文字在左,示例,图片居右,文字在左,示例, 图片居右,文字在左,示例。

md 源码:

<div style="display:inline-block; border:2px blue solid; ">
 <img src="http://img.xiaobotalk.cn/macSkills/markdown_01.png" style="float:right;" width="20%" alt="markdown">
 文字部分文字部分...
</div>

md 中外链 iFrame 视频

md 源码

<iframe src="//player.bilibili.com/player.html?aid=17494235&cid=28571298&page=1" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true"> 
</iframe>

如何从视频网站获取嵌入代码

bilibili 为例,打开后点击分享视频 -> 嵌入代码 -> 复制,然后把链接拷贝到 md 文件中,其他视频网站类似。

markdown

二:Mac 上 Markdown 写作工具


付费软件就不说了,付费 md 书写软件数不胜数,貌似 UIysses 是付费系列中口碑不错的书写软件,不过价格也不便宜,所以我没用。免费的软件目前我只用下边两款。

马克飞象

就我个人而言,对于一般的需要产出 pdf 或者 md 的需求,我都直接打开 https://maxiang.io/ ,也是文章开头提到的马克飞象,打开即可书写,实时预览,分享链接给小伙伴,可以导出 pdf,可以绑定到印象笔记(这个功能需要付费),同时它还具有浏览器缓存,即使关闭了浏览器,下次打开数据依然存在;最近,马克飞象也出了 Chrome App 和 Mac 客户端软件,免费软件中的首选。

markdown

VS Code

VS Code 功能非常强大,同样支持 md 书写和实时预览(安装插件),软件大小 60 MB 左右,也比较轻量,推荐。

results matching ""

    No results matching ""