本文包括:使用多色图标,使用mermaid绘图

使用多色图标

 

效果预览:

        

 

食用方法:

这里使用阿里的iconfont矢量图
 

第一步,在iconfont中选择需要的图标,并点击添加到项目

 

关于酷安表情:点击图标库,搜索coolapk即可

这里十分感谢一位叫一丝的大佬上传了酷安表情矢量图
 

iconfont

 
点击资源管理 -> 我的项目,找到刚才的项目,这里使用symbol方式,点击 Symbol ,然后会生成一个链接(以js结尾)
 

第二步,复制项目下生成的链接

 
在适当位置加入以下代码
 

<script src="https://这里填刚刚复制的链接"></script>

 

第三步,在自定义css(非必填)中,加入类似下面的代码

 

/*类名要与第四步svg标签class的值相同,可以创建多个类,以显示不同的样式*/
.iconfont {  
       /*调整图标大小,这里是我感觉合适的配置*/
       width: 2ch; height: 2ch;  
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }

 

第四步,使用

 
在网页中可以通过以下标签使用(注意,在撰写文章时 ,html代码要放在两个!!!之间,!!!单独占一行 )
 

<!--如果嫌占位置,可以删除换行,这样如果你又嫌长,可以删除aria-hidden属性(dog)-->
<!--下面的icon-xxx改成要使用的图标在iconfont项目中的名称-->
<svg class="iconfont" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>  
</svg>

 
也可以通过调整字体大小来影响图标的大小,在上面的css中,ch就是一个相对大小单位
 
例如在文章开头的预览中,我就把图标放大到了2.2倍
 

<p style="font-size:220%">
<svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-java-script"></use></svg>&nbsp&nbsp
<svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-105"></use></svg>&nbsp&nbsp
<svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-1011"></use></svg>&nbsp&nbsp
<svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-shounvehuaji"></use></svg>
</p>

 

大功告成 -->

 


 

使用mermaid绘图

 
按照以下模板在body内插入代码即可

        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>

        
        <div class="mermaid">
           <!--这里是mermaid代码-->
        </div>

 
div的背景可以改成透明,不然白色很不舒服

style="background-color:rgba(0,0,0,0)"
也可以在后台自定义css(非必填)中设置
.mermaid{background-color:rgba(0,0,0,0);}
 

示例:

graph LR A["{vbptr}"] T["(vbtable)
0    |0         
1    |偏移量"] M["m_A"] A --> T --> M