wzpan / wzpan.github.io

个人博客,转载请保留出处。
http://hahack.com
34 stars 13 forks source link

From Ruhoh to Hexo #15

Open zero863 opened 6 years ago

zero863 commented 6 years ago

您好,请问您使用light主题是否可以支持LaTeX公示显示呢,如果可以能否给我一些指导

wzpan commented 6 years ago

可以的。现在我的方案是:

  1. 使用 hexo-renederer-markdown-it 或者 hexo-renderer-pandoc 作为渲染引擎;
  2. 如果使用的是 hexo-renderer-markdown-it,再开启 markdown-it-mathjax 插件。如果是 hexo-reneder-pandoc,默认配置即可;
  3. 在主题中插入如下的模板脚本:
<% if (page.math) { %>
<script type="text/x-mathjax-config">
   MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
        tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
        TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
        messageStyle: "none"
    }); 
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<% } %>

需要启用 mathjax 的文章,只需要在 front-matter 里头添加 math: true 选项即可。

如下是我的 hexo-renderer-markdown-it 的配置:

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: false
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-footnote
    - markdown-it-mathjax
  anchors:
    # Minimum level for ID creation. (Ex. h2 to h6)
    level: 2
    # A suffix that is prepended to the number given if the ID is repeated.
    collisionSuffix: 'v'           
    # If `true`, creates an anchor tag with a permalink besides the heading.
    permalink: false             
    # Class used for the permalink anchor tag.
    permalinkClass: header-anchor 
    # The symbol used to make the permalink
    permalinkSymbol: