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

注:目前开通个人网站朝思录,之后的博文将在上面更新,CSDN博客会滞后一点


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


步骤

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

npm uninstall hexo-renderer-marked --save
npm 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

发布了8 篇原创文章 · 获赞 17 · 访问量 2万+
展开阅读全文

Hexo nexT主题博客,搭建遇到错误

08-03

搭建博客,配置部署的时候我遇到了点问题 ``` ERROR Process failed: layout/_macro/post.swig Error: SyntaxError: Unexpected token || in file E:\BlogRepos\themes\next\layout\_macro\post.swig. at Object.exports.throwError (E:\BlogRepos\node_modules\swig-templates\lib\utils.js:188:9) at exports.Swig.precompile (E:\BlogRepos\node_modules\swig-templates\lib\swig.js:550:13) at Object.compile (E:\BlogRepos\node_modules\swig-templates\lib\swig.js:651:16) at Function.swigRenderer.compile (E:\BlogRepos\node_modules\hexo\lib\plugins\renderer\swig.js:41:47) at Theme._View.View.View._precompile (E:\BlogRepos\node_modules\hexo\lib\theme\view.js:116:31) at Theme._View.View.View (E:\BlogRepos\node_modules\hexo\lib\theme\view.js:14:8) at new Theme._View.View (E:\BlogRepos\node_modules\hexo\lib\theme\index.js:37:13) at Theme.setView (E:\BlogRepos\node_modules\hexo\lib\theme\index.js:71:16) at file.read.then.result (E:\BlogRepos\node_modules\hexo\lib\theme\processors\view.js:14:14) at tryCatcher (E:\BlogRepos\node_modules\bluebird\js\release\util.js:16:23) at Promise._settlePromiseFromHandler (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:517:31) at Promise._settlePromise (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:574:18) at Promise._settlePromise0 (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:619:10) at Promise._settlePromises (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:699:18) at Promise._fulfill (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:643:18) at Promise._resolveCallback (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:437:57) at Promise._settlePromiseFromHandler (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:529:17) at Promise._settlePromise (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:574:18) at Promise._settlePromise0 (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:619:10) at Promise._settlePromises (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:699:18) at Promise._fulfill (E:\BlogRepos\node_modules\bluebird\js\release\promise.js:643:18) at E:\BlogRepos\node_modules\bluebird\js\release\nodeback.js:42:21 ``` 希望大佬帮我看看 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览