hexo支持mathjax

新博客:https://yinl.fun
歡迎關注,同步更新html

技術博客有時避免不了一些數學公式,利用Hexo創建博客後,最開始利用Google的公式庫,可是得請求Google的網址,有時會被牆,因此不得不轉戰方向。讓Hexo本身支持mathjax必然是一個省心的過程。然而事實並不省心。若是要創建一個支持數學公式的基於Hexo框架的博客,你得符合如下要求:node

  • 博客:Hexo,博客的搭建能夠看我以前的文章
  • 支持mathjax的markdown渲染器:hexo-renderer-kramed
  • 支持mathjax的Theme:NexT:(NexT使用文檔,以前用的Archar,不過不支持mathjax)
  • markdown編輯器:Typora

安裝渲染器

hexo默認的渲染器是marked,並不支持mathjax。kramed是在marked基礎上修改的,支持了mathjax。你的hexo工程目錄下的node_modules中能夠找到對應的渲染器文件夾。同時在你的工程目錄下用如下命令安裝kramed。另外補充一個NexT配置中推薦的渲染器hexo-renderer-pandoc,功能很強大不只能夠渲染markdown,還支持textile、reStructedText等許多其餘格式。具體參見官方教程ajax

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
// npm install hexo-renderer-pandoc --save

若是你安裝了hexo-math包,卸載再安裝hexo-renderer-mathjax包npm

npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

更新mathjax的CDN連接,打開node_modules/hexo-renderer-mathjax/mathjax.htmlmarkdown

修改<scripts>標籤hexo

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

NexT開啓mathjax

打開主題的_config.yml文件,找到math字段,新版的NexT主題支持兩個數學渲染引擎mathjax和katex,這裏咱們使用mathjax框架

math:
  enable: true
  // 省略不少註釋
  engine: mathjax

文章中開啓mathjax標籤

爲加快渲染速度,渲染器只會在標籤中有mathjax: true的文章中使用利用mathjax渲染。例:編輯器

title: hexo支持mathjax
date: 2018-08-31 08:33:08
tags: [Web,hexo,mathjax]
mathjax: true // 開啓後纔會渲染數學公式

Typoare

Typoare原生支持數學公式的輸入和渲染,並且還支持本地圖片導入的圖片複製位置。code

而後開啓你的Typoare編輯器輸入幾串公式,看看效果吧~cdn

相關文章
相關標籤/搜索