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中的效果并不一样,例如,所以估计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改成样式
  3. 将所有的代码粘贴到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 ("" %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在编辑器预览界面是可以正常显示的,但是在博客页面好像无法显示,暂时不清楚原因。

你可能感兴趣的:(技术知识库)