如何在HEXO中渲染Latex数学公式

来源：互联网发布：mac 键位修改编辑：程序博客网时间：2024/06/04 15:54

被HEXO渲染Latex公式绊了一段时间，最近终于搞定了，以下是步骤：

步骤

1、卸载Marked渲染器，安装Markdown it Plus渲染器
cd到你的blog目录下执行这两个指令：

npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-markdown-it-plus --save

2、配置_config.yml文件
在文件中添加：

markdown_it_plus:  highlight: true  html: true  xhtmlOut: true  breaks: true  langPrefix:  linkify: true  typographer:  quotes: “”‘’  plugins:    - plugin:        name: markdown-it-katex        enable: true    - plugin:        name: markdown-it-mark        enable: false

3、在博客html的head中加载Katex的CSS样式
这一步可以手动做，但是每次hexo clean后还得手动一次很麻烦；因为hexo是基于模板生成html文件，所以可以将样式表写入模板中。
以默认主题landscape为例。在路径/themes/landscape/layout/_partial下找到head.ejs文件，将以下语句写入文件中即可

<link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet">

我写入之后是这个样子：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <%  var title = page.title;  if (is_archive()){    title = __('archive_a');    if (is_month()){      title += ': ' + page.year + '/' + page.month;    } else if (is_year()){      title += ': ' + page.year;    }  } else if (is_category()){    title = __('category') + ': ' + page.category;  } else if (is_tag()){    title = __('tag') + ': ' + page.tag;  }  %>  <title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>  <% if (theme.rss){ %>    <link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">  <% } %>  <% if (theme.favicon){ %>    <link rel="icon" href="<%- theme.favicon %>">  <% } %>  <% if (config.highlight.enable){ %>    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">  <% } %>  <%- css('css/style') %>  <%- partial('google-analytics') %>  <link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet"></head>

4、hexo g与hexo d即可
注意公式的语法可能与Latex语法略有出入，毕竟是Katex渲染器，Katex渲染器的语法支持列表见链接：https://khan.github.io/KaTeX/function-support.html

效果

原Latex语句：

\begin{aligned}f_Y(y) & = f_X[h(y)]|h'(y)| \\[2ex]& = f_X[h(y)]h'(y) \\[2ex]& = \frac{1}{\theta}e^{-\frac{x}{\theta}}[\frac{dx}{dy}(-\frac{\theta}{ln(1-y)})] \\[2ex]& = \frac{1}{\theta}e^{-\frac{-\frac{\theta}{ln(1-y)}}{\theta}}\frac{\theta}{1-y} \\[2ex]& = \frac{1}{\theta}e^{ln(1-y)}\frac{\theta}{1-y} \\[2ex]& = \frac{1-y}{\theta}\frac{\theta}{1-y} \\[2ex]& = 1\end{aligned}

渲染效果：

参考

http://blog.cofess.com/2017/09/06/how-to-use-mathjax-to-render-latex-mathematical-formulas-in-hexo.html
http://lowrank.science/Hexo-KaTeX/
https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus

阅读全文

0 0