CSDN markdown icon 圖標

需求

在CSDN Markdown 編輯器寫博客時，想插入一些常用的icon圖標，但是沒找到對應的CSDN Markdown 編輯器支持的icon圖標列表，所以打算自己去找找看。

相關資料

• CSDN 在線編輯器
• 開源在線 Markdown 編輯器
• stackedit.io
• stackedit.io github
• fontawesome.io

CSDN Markdown 編輯器中icon圖標

• 根據CSDN 在線編輯器描述來看，是用的stackedit.io修改而來的，但是根據stackedit 作者benweet在StackEdit Icons中的回答來看，stackedit是支持font demo網頁中列出的上百個icon的。但是font demo中的大多icon在CSDN上並不能顯示，並且個別能顯示的和font demo中的效果並不一樣，例如<i class="icon-folder-open"></i>，所以估計CSDN Markdown 編輯器中的icon server和stackedit.io並不一樣。
• 再根據http://write.blog.csdn.net/mdeditor這個鏈接發現，使用到了mdeditor這個開源在線的Markdown 編輯器，並且在mdeditor官網也能發現CSDN是mdeditor的用戶。

暴力測試icon支持列表

1. 用Python抓取font demo中所有的icon樣式name.
2. 將所有的樣式name改成<i class="icon-folder-open"></i>樣式
3. 將所有的<i>代碼粘貼到CSDN編輯器中，查看能夠正常顯示的icon.

Python腳本抓取所有的icon樣式name

#coding:utf-8
import re
from urllib.request import urlopen
from bs4 import BeautifulSoup

html = urlopen("https://stackedit.io/res/libs/fontello/demo.html")
soup = BeautifulSoup(html.read(), "html.parser")
spanSoup = soup.find_all('span', attrs={'class': re.compile("(i-name)")})
for spanTag in spanSoup:
    print ("<i class='%s'></i>" %spanTag.string)

結果是：

<i class='icon-pause'></i>
<i class='icon-glass'></i>
<i class='icon-music'></i>
<i class='icon-search'></i>
<i class='icon-mail'></i>
<i class='icon-mail-alt'></i>
<i class='icon-heart'></i>
<i class='icon-heart-empty'></i>
<i class='icon-star'></i>
...

CSDN正常顯示的icon樣式name

測試日期是2017-12-18 10:03:11 星期一

key	value
icon-picture
icon-th-large
icon-th
icon-folder-open
icon-upload
icon-help
icon-lock
icon-lock-open
icon-hdd
icon-code
icon-pencil
icon-forward
icon-trash
icon-italic
icon-bold
icon-list
icon-check
icon-check-empty
icon-folder
icon-spinner
icon-chart-bar
icon-link
icon-file
icon-ellipsis-vert

以上icon在編輯器預覽界面是可以正常顯示的，但是在博客頁面好像無法顯示，暫時不清楚原因。