由於美觀與數學內容的需求，想要加入html功能與latex的數學式寫法
html
一般markdown是有支援html的，但hugo要設定才能使用
解法: 到config.toml(或其他設定檔，那可能要找其他設定格式)
加入
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
即可完成設定
latex數學式
設定較為複雜，大概流程是使用MathJax 3 套件，並進行引入、美化設定
step 1 創建html引入MathJax 3
於layouts/partials/ 創建 mathjax_support.html
(有使用主題的話在theme/layouts/pratials，以下路徑也是一樣)
寫入以下內容
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$','$$'], ['\\[', '\\]']],
processEscapes: true,
processEnvironments: true
},
options: {
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
}
};
window.addEventListener('load', (event) => {
document.querySelectorAll("mjx-container").forEach(function(x){
x.parentElement.classList += 'has-jax'})
});
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
step 2 於主頁header引入剛剛的設定
在 layouts/partials/header.html 的 head tag中
寫下 {{ partial “mathjax_support.html” . }}
step 3 美化
於CSS檔加入以下設定
code.has-jax {
-webkit-font-smoothing: antialiased;
background: inherit !important;
border: none !important;
font-size: 100%;
}
完成
效果展示
這是div html tag
並設定這一區塊文字顏色為紅色
這是latex效果呈現
$\sum_{n=1}^5 n^2$