Merge pull request #56 from ZJU-Turing/dev

style: update image syntax for better rendering and alignment in mult…

Author: 5dbwat4

docs/course_advice.md

@@ -129,12 +129,9 @@ counter: True
 
 **体测是评奖评优的重要依据**，至少需要合格才能获得奖学金，良好才能获得一等（及更高等）奖学金，平均分 50 也是毕业硬指标。（注意大一上体测用于大一学年奖学金评选，大一下及大二上体测用于大二学年奖学金评选，以此类推）项目和评分标准如下图所示（其实浙大体艺上有）：
 
-<div align="center">
-    <img src="images/PE_1.png">
-</div>
-<div align="center">
-    <img src="images/PE_2.png">
-</div>
+![](images/PE_1.png)
+
+![](images/PE_2.png)
 
 注意下载**浙大体艺** APP，打卡、体测和体育成绩、上课签到也会在这个 APP 上进行。
 

docs/cser.md

@@ -16,7 +16,7 @@ counter: True
     以下是原文内容：
 
 CS，即 Computer Science。众所周知，国内的计算机本科教育问题百出，其中在工具方面的介绍可以说是基本上没有。翁恺老师在第一节课说的：要逐渐让自己看上去、闻上去都像一个 CS 人，<del>比如买十件格子衬衫</del>
-<div align=center> <img src="https://cdn.tonycrane.cc/turing2022/images/bTmxcFAXdHNgWS7.jpeg" width = 45%/> </div>
+<img src="https://cdn.tonycrane.cc/turing2022/images/bTmxcFAXdHNgWS7.jpeg" style="width:45%;"/>
 于是在这里笔者抛砖引玉，简要介绍部分在笔者学习 CS 的过程中遇到的有用的工具，以提高诸位的灵活性和生产效率。
 
 ## 说在前面的话
@@ -57,7 +57,7 @@ CS，即 Computer Science。众所周知，国内的计算机本科教育问题
 ### 信息获取
 
 * [**《提问的智慧》**](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md)  
-  正如我校沟通技巧课课件所言：<div align=center> <img src="https://cdn.tonycrane.cc/turing2022/images/v2-566c0540c037413964849ec7e13ce43f_1440w.jpeg" width = 50%/> </div>  
+  正如我校沟通技巧课课件所言：<img src="https://cdn.tonycrane.cc/turing2022/images/v2-566c0540c037413964849ec7e13ce43f_1440w.jpeg" style="width:50%;"/>
   不止 CS，在各个领域里提问都是一项必备的技能。首先你要知道提问绝对不是解决问题的首选，因为从你提出问题到别人解答最后你自己解决是一个非常费时间的过程，这无疑会严重影响做事情的效率。你应该通过搜索等各种方式寻找自行解决的方法。如果依然无法解决，你才需要提问，并要正确、清晰地描述出问题。  
   强烈推荐有空时阅读《提问的智慧》这本书，这是作为一个 CSer 的基本素养。遇到问题时刻切记先 STFW、RTFM、RTFSC.
 
@@ -93,7 +93,7 @@ CS，即 Computer Science。众所周知，国内的计算机本科教育问题
 * 首先要知道，Markdown 只是一种语法，因此任何能够打开纯文本的东西都能编辑 Markdown (如电脑上的记事本)。但是我们仍然需要专门的编辑器来提供预览功能，不然我们只能看到一些符号。常用的 Markdown 编辑器有 Typora (现在要收费，据说下载旧版本 0.11.18 仍然可以使用)，VSCode+Markdown Preview Enhanced 插件..    
 <del>当然强如笔者同学，也是可以随便拿个东西写然后颅内预览的</del> 
 
-<div align=center> <img src="https://cdn.tonycrane.cc/turing2022/images/XHPWlzDfEo4CAvT.png"width = 40%/> </div>
+<img src="https://cdn.tonycrane.cc/turing2022/images/XHPWlzDfEo4CAvT.png" style="width:40%;"/>
 
 * Markdown 的具体语法其实是非常简单的，基本上知乎/Bilibili 随便搜一篇教程即可。如此类实践性的技能，只需要在最开始记住基本操作，在实践中不断深化，如果遇到问题再上网搜索即可。  
 这里贴出笔者同学的 Markdown 的 PPT，仅供参考  <https://slides.tonycrane.cc/MarkdownLecture>  
@@ -114,7 +114,7 @@ LaTeX（注意大小写）是为了作者可以更加专注地编写的内容，
 本地 LaTeX 环境，笔者是借鉴了这篇文章 [Visual Studio Code (vscode)配置LaTeX - Ali-loner的文章 - 知乎](https://zhuanlan.zhihu.com/p/166523064)使自己的 VSCode 能够运行 LaTeX，至于其他如 TeXworks, TeXStudio 等编辑器，笔者无法给出具体经验，同学们可以自行上网搜索。
 * LaTeX 的具体语法笔者是通过 Overleaf 上的教程来学习的。链接如下 [part 1](https://www.overleaf.com/learn/latex/Free_online_introduction_to_LaTeX_(part_1)), [part 2](https://www.overleaf.com/learn/latex/Free_online_introduction_to_LaTeX_(part_2))，[part 3](https://www.overleaf.com/learn/latex/Free_online_introduction_to_LaTeX_(part_3)). 相对 Markdown 而言 LaTeX 的语法更多，需要更多的时间来熟悉。而且 Markdown 内是可以通过内 LaTeX 内嵌公式的 <https://www.learnlatex.org/en/>  
 这里再推荐一个网站 <https://texnique.xyz/>，可以利用这个网站熟悉数学符号的输入。
-* 如果你很懒，不想写 LaTeX<del>（比如笔者）</del>可以利用 GitHub 上 <https://github.com/Keldos-Li/typora-latex-theme>提供的主题，将你的 typora 伪装成 LaTeX <div align=center> <img src="https://cdn.tonycrane.cc/turing2022/images/cover.png" width = 100%/> </div>
+* 如果你很懒，不想写 LaTeX<del>（比如笔者）</del>可以利用 GitHub 上 <https://github.com/Keldos-Li/typora-latex-theme>提供的主题，将你的 typora 伪装成 LaTeX <img src="https://cdn.tonycrane.cc/turing2022/images/cover.png" style="width:100%;"/>
 
 ### 博客/笔记本  
 

docs/css/custom.css

@@ -241,4 +241,11 @@ input#mkdocs-content-password {
 
 .md-typeset .emojione, .md-typeset .gemoji, .md-typeset .twemoji {
   vertical-align: sub;
+}
+
+.md-typeset img{
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
 }

docs/rvpn.md

@@ -24,7 +24,7 @@ counter: True
 进入网站 [myvpn.zju.edu.cn](https://myvpn.zju.edu.cn/) 或者通过浙大钉—工作台—全部—网络缴费进入信息技术中心网站，这里将浙大钉换为钉钉也可以。
 
 !!! Note "网页版激活界面"
-    <figure markdown="1">![](images/activate.png)</figure>
+    ![](images/activate.png)
 
 第一次使用 VPN 之前先要激活账号，点击“激活账号”可跳转到浙江大学统一身份认证并激活（可能会用到校园卡密码，身份证后六位）。
 
@@ -57,11 +57,11 @@ WebVPN 是一种通过网页跳转来实现外网访问内网的连接方式，
 
 首先进入 [webvpn.zju.edu.cn](https://webvpn.zju.edu.cn/)，可以看到以下界面，然后输入用户名及网络密码并登录，这里的网络密码可能与统一身份认证密码不同。
 
-<figure markdown="1">![](images/WebVPN-1.png)</figure>
+![](images/WebVPN-1.png)
 
 成功登录后，在以下界面红框所圈的搜索框输入要访问的学校网址即可。（例如 [cc98.org](https://www.cc98.org/)）
 
-<figure markdown="1">![](images/WebVPN-2.png)</figure>
+![](images/WebVPN-2.png)
 
 
 ### RVPN
@@ -79,7 +79,7 @@ WebVPN 是一种通过网页跳转来实现外网访问内网的连接方式，
 ZJUWLAN 在 Wi-Fi 里可以直接找到并连接，但是需要认证，一般在连接后会弹出认证窗口，在填写好用户名、密码后，即可正常上网。一次认证有效时长为 14 天，到期后需要重新认证。
 
 !!! Note "网页版认证界面"
-    <figure markdown="1">![](images/net3_zju.png)</figure>
+    ![](images/net3_zju.png)
 
 如果没有弹出的话也可以直接访问 [net3.zju.edu.cn](http://net3.zju.edu.cn)，进入认证界面。
 
@@ -89,21 +89,21 @@ ZJUWLAN-Secure 在连接时，在输入所用的用户名、密码后即可完
     点击桌面右下方菜单栏中的无线网图标，选择 ZJUWLAN-Secure 进行连接，在输入用户名及密码后，点击连接后即可上网。
     ???+ General "操作步骤"
         === "Step 1"
-            <figure markdown="1">![](images/ZJUWLAN-Secure-Windows-1.png)</figure>
+            ![](images/ZJUWLAN-Secure-Windows-1.png)
         === "Step 2"
-            <figure markdown="1">![](images/ZJUWLAN-Secure-Windows-2.png)</figure>
+            ![](images/ZJUWLAN-Secure-Windows-2.png)
         === "Step 3"
-            <figure markdown="1">![](images/ZJUWLAN-Secure-Windows-3.png)</figure>
+            ![](images/ZJUWLAN-Secure-Windows-3.png)
         === "Step 4"
-            <figure markdown="1">![](images/ZJUWLAN-Secure-Windows-4.png)</figure>
+            ![](images/ZJUWLAN-Secure-Windows-4.png)
 
 === "Android"
     在手机中进入 WLAN 连接页面，选择 ZJUWLAN-Secure 进行连接，之后的阶段 2 身份认证和 CA 证书均选择**不认证**，在输入用户名和密码后，点击连接即可。
     ???+ General "操作步骤"
         === "Step 1"
-            <figure markdown="1">![](images/ZJUWLAN-Secure-Android-1.jpg)</figure>
+            ![](images/ZJUWLAN-Secure-Android-1.jpg)
         === "Step 2"
-            <figure markdown="1">![](images/ZJUWLAN-Secure-Android-2.jpg)</figure>
+            ![](images/ZJUWLAN-Secure-Android-2.jpg)
 
 ### 有线连接