12月Blog整修记录

Jekyll添加数学公式语法支持

公式书写功能

在这个美好的今天我的个人站终于支持数学公式语法了！！！支持Markdown(Mathjax)语法书写数学公式。

参考这个教程，在include/head.html中添加以下代码：

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      jax: ["input/TeX", "output/HTML-CSS"],
      tex2jax: {
        inlineMath: [ ['$', '$'], ["\(", "\)"] ],
        displayMath: [ ['$$', '$$'], ["\[", "\]"] ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
  </script>
  <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>

ps今天才发现vscode→ctrl+shift→V可以同步预览markdown。

当然还是要下载两个插件：Markdown All in One和Markdown+Math。

Vscode tql！

图片对比功能

/include/Head.html中添加如下代码：

<!---add image comparison slider--->
<script
  type="module"
  src="https://unpkg.com/img-comparison-slider@3/dist/component/component.esm.js"
></script>
<script
  nomodule=""
  src="https://unpkg.com/img-comparison-slider@3/dist/component/component.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/img-comparison-slider@3/dist/collection/styles/initial.css"
/>
<style type="text/css">
    img-comparison-slider {
        text-align: center;
      --divider-width: 2px;
      --divider-color: #c0c0c0;
      --handle-opacity: 1;
    }
</style>

post中即可添加图片对比展示——

<p style = "text-align: center">
<img-comparison-slider>
  <img  slot="before" src="../assets/img/graphics/AlfxDisney.png" />
  <img  slot="after" src="../assets/img/graphics/AlfxLambert.png" />
</img-comparison-slider>
</p>

效果如下——

emmmmm虽然还是有点繁琐，不过要单独添加语法也太为难我了呜呜…

视频插入格式统一

<iframe src="..." height="500px" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

添加多种格式书写

emmmmmm这个插件→jekyll-spaceship是个多媒体格式大杂烩，包含上面的mathjax，就是安装非常得慢，得翻墙，翻了也还是很慢…随缘吧= -= 主要图一个Mermaid画图表，找不到其他能用的mermaid插件了。Mermaid文档