MarkDown添加图片的三种方式

里面有众多工具:

https://github.com/mundimark/awesome-markdown

https://github.com/mrtzh/unbuch             将多个markdown变成html或pdf的工具。

 

1、haroopad,  typora 或Remarkable 可能是 Linux 上最好的 Markdown 编辑器了，它也适用于 Windows 操作系统。它的确是是一个卓越且功能齐全的 Markdown 编辑器，为用户提供了一些令人激动的特性。

一些卓越的特性：

支持实时预览
支持导出 PDF 和 HTML
支持 Github Markdown 语法
支持定制 CSS
支持语法高亮
提供键盘快捷键
高可定制性和其他


2、Typora 是一款 Markdown 编辑器，拥有 Windows、macOS、Linux 客户端，可以算作一款 Windows 下难得的好看、优美的客户端。

 

非常有用的插件：

1.  html table 转成 markdown 的table：     https://jmalarcon.github.io/markdowntables/

2.  markdown table 的美化：    markdowntable.com  (对unicode支持不好)，   https://www.tablesgenerator.com/markdown_tables    (对unicode支持很好)

 

markdown 文件里可以包含自定义的css样式代码，如下面的文件是可以的:

<hzh>what is DataBase</hzh>

<style>
hzh{
    color:green;
}
</style>

 

 

在 Ubuntu 16.04上，安装最新的wkhtmltopdf

wget   https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
tar   vxf   wkhtmltox-0.12.3_linux-generic-amd64.tar.xz 
cp wkhtmltox/bin/wk*  /usr/local/bin/

你可以通过以下方式确认：

$ wkhtmltopdf --version

另外，选择 0.12.3而不是 0.12.4，因为出现了一个奇怪的页面大小问题，这里讨论：

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3226

 

 

 

插图最基础的格式就是：

  • ![Alt text](图片链接 "optional title")

Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接：可以是图片的本地地址或者是网址。"optional title"：鼠标悬置于图片上会出现的标题文字，可以不写。

插入本地图片

只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。
例如：

  • ![avatar](/home/picture/1.png)

不灵活不好分享，本地图片的路径更改或丢失都会造成markdown文件调不出图。

插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。
例如：

将图片存在网络服务器上，非常依赖网络。

把图片存入markdown文件

用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。

  • 基础用法：
    ![avatar](data:image/png;base64,iVBORw0......)
    这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。
  • 高级用法
    比如：
  • ![avatar][base64str]
  • [base64str]:data:image/png;base64,iVBORw0......

最后，base64的图片编码如何得来？

  1. 使用python将图片转化为base64字符串
import base64
f=open('723.png','rb') #二进制方式打开图文件
ls_f=base64.b64encode(f.read()) #读取文件内容，转换为base64编码
f.close()
print(ls_f)
  1. base64字符串转化为图片
import base64
bs='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略
imgdata=base64.b64decode(bs)
file=open('2.jpg','wb')
file.write(imgdata)
file.close()


typora是较好的转换工具，可以将中文的markdown文件成功转换成pdf和html，但是它无法将图片转换成base64嵌入到html中(嵌入后html就可以不依赖原始图片文件)，因此我们可以使用以下的脚本来将html里的图片全部转换成base64格式，注意转换前保证你的html打开后能正确的看到图片，也就是html的位置和图片的路径是一致的：

文件 standalone_html.py 见博客的 利用python将html变成standalone，即将html中的图片变成base64格式并嵌入到html文档。

 

 

markdown 常用语法:

## $\color{#0099ff}{lsdgeg}$
## $\color{green}{lsdgeg}$
### <font color=#f00fff>lafgefw</font>
ldsllg$\color{green}{lsdgeg}$dsagegefa 
<font color=#0099ff size=72 face=”黑体”>dsds</font>
<font face="黑体">我是黑体字</font>
<font color=red>我是红色</font>
$\color{#4285f4}{更}\color{#ea4335}{丰}\color{#fbbc05}{富}\color{#4285f4}{的}\color{#34a853}{颜}\color{#ea4335}{色}$
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>
<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>
<table><tr><td bgcolor=#FF4500>这里的背景色是：OrangeRed， 十六进制颜色值：#FF4500， rgb(255, 69, 0)</td></tr></table>
【1】 &emsp;或&#8195; //全角
【2】 &ensp;或&#8194; //半角
【3】 &nbsp;或&#160; //半角之半角

 

 

 

巧用 Font Awesome 装点 Markdown 文档:

要在 Markdown 文档中输入 Font Awesome，需要在文档中任意位置贴粘入如下语句（可以放在文档结尾处，以不影响直接在 Markdown 文档中的阅读）：

<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> 
</head> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

其中最后一行是表示此文档需要导入 Font Awesome 最新版本 5.0.13（截止至 2018.06.11）的图标符号，前面的四行是用于将 Font Awesome 4.x 版本的语句转化为 5.0.13 版本。这是因为在 2017 年年底发布的 5.0 版本中，对 4.x 版本的大量图标符号的名称进行了重写，加上此四行就可以同时使用 4.x 和 5.x 版本的语句。

插入符号

之后就可以直接插入各类 Font Awesome 符号了，其基础用法是：

<i class="fa fa-weixin"></i>

这表示一个微信图标的符号。直接把它写入文档中即可在编译时得到如下效果：

获取符号名称

在 Font Awesome 的符号列表中搜索，就可以得到不同的符号的写法，点击符号名称右侧的复制图标，就可以复制它：

获取了常用的符号名称，就可以把它保存在 TextExpander 或 LaunchBar 的 Snippets 等缩写工具中，以备之后快速调用。

还有一个更简单的方法，LaunchBar 中自带了一个 Font Awesome Icons 的动作，可以在其中直接搜索 Font Awesome 符号的写法，具体步骤是：

  1. 通过缩写如 FONT 检索到 Font Awesome Icons 动作，回车选择；
  2. 通过缩写检索目标符号，如 GOOGLE；
  3. 找到后按 → 方向键，在出现的列表中移动光标至右边标记为 HTML 的一行，按 ⌘Command-C 复制，再在文档中贴粘。

由于目前这个动作还并未随 Font Awesome 5.0 的发布一起更新，其中只包含了 4.x 中 786 个图标，且采用的是 4.x 版本的写法。这也就是在上文中需要加入将 4.x 版本转化为 5.0 版本的原因。

从此 LaunchBar 动作出复制出来的符号名称，包含了一个 aria-hidden="true" 的代码，它表示在让电脑朗读屏幕内容时，忽略掉此符号，对显示效果没有影响。如果你没有此需求，可保留此代码，也可以删掉。

修改符号格式

使用 Font Awesome 的另一个优点是，除了上述简单的符号调用，还可以对这些符号进行格式的修改，以实现更丰富的排版可能性。下面列举几个日常用得到的有趣格式。

调节尺寸

要调节符号的尺寸，只需对其名称加上尺寸的参数，例如，要调大上文所述的微信图标符号的尺寸，只需把

<i class="fa fa-weixin"></i>

拓展写为：

<i class="fa fa-weixin fa-2x"></i>

即可得到加大尺寸的符号。 

转动

通过在符号名称中加入 fa-spin 就可以使符号变成动态的连贯转动效果，通过 fa-pulse 也可以变成 8 步旋转效果：

 

<i class="fa fa-weixin fa-2x"></i> dgafefa


<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> 
</head> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

 

 

使用方法：

1、一级列表行首不用空格，像这样1.

     二级列表行首用四个空格，像这样    * 1.1

     三级列表行首用8个空格，像这样        * 1.1.1

 

单个命令的书写方法：

`单个命令`

代码块书写的方法：

1、用两个tab在每行的前面;  或：

2、如下写法：

``` bash
ls
find . -iname "*"
```

 

 

我自己的remarkable里的自定义css style：

见我自己的文章 google chrome 浏览器插件。

 

 

 

 

 

posted @ 2019-07-18 12:52  微信公众号--共鸣圈  阅读(1704)  评论(0)  编辑  收藏  举报