Fix Task List Rendering for hexo-renderer-kramed

Last updated on 2021-09-15, Wed, 11:55 PM

阅读中文版本

Problem: hexo-renderer-kramed Refused to Render Task Lists

According to the Fluid Theme Doc, MathJax formula engine has been integrated into the theme.

To avoid potential bugs when it comes to complex formulas, as the doc says, it’s recommended to replace the original renderer hexo-renderer-marked with hexo-renderer-kramed.

However, this new renderer failed to properly display task lists in Markdown syntax.

It was supposed to look like this:

  • Bug
  • Feature

But It turned out this:

- [x] Bug
- [ ] Feature

I was annoyed.

Solution: Code Glue from Forsaken Pull Request

I searched the problem and found an open pull request here:

sun11/hexo-renderer-kramed PR#1

Well, the author didn’t merge the code… So I have to do this manually now.

I checked the commits and found it quite small.

All I needed to do is find the local directory and paste it in the responsible file lib/renderer.js. Not difficult.

commit f06fc6acbae2d1c3a4ca2188a2ae5b5af1e00d5c

Here’s the code.

// Support To-Do List
Renderer.prototype.listitem = function(text) {
   if (/^\s*\[[x ]\]\s*/.test(text)) {
     text = text.replace(/^\s*\[ \]\s*/, '<input type="checkbox"></input> ').replace(/^\s*\[x\]\s*/, '<input type="checkbox" checked></input> ');
     return '<li style="list-style: none">' + text + '</li>\n';
   } else {
     return '<li>' + text + '</li>\n';
   }
 };

Just find /node_modules/hexo-renderer-kramed/lib/renderer.js and paste it.

Finally it looks like this.

...

require('util').inherits(Renderer, kramedRenderer);

// Support To-Do List
Renderer.prototype.listitem = function(text) {
  if (/^\s*\[[x ]\]\s*/.test(text)) {
    text = text.replace(/^\s*\[ \]\s*/, '<input type="checkbox"></input> ').replace(/^\s*\[x\]\s*/, '<input type="checkbox" checked></input> ');
    return '<li style="list-style: none">' + text + '</li>\n';
  } else {
    return '<li>' + text + '</li>\n';
  }
};

// Add id attribute to headings
Renderer.prototype.heading = function(text, level) {
...

Execute hexo clean and hexo s, then open http://localhost:4000 to check the site, it should work now.

  • Bug 1
  • Bug 2
  • Bug 3
    • Bug 3.1
    • Bug 3.2
    • Bug 3.3

Fix Task List Rendering for hexo-renderer-kramed
https://blog.h3a.moe/en/src/d07366-1/
Author
H3arn
Posted on
2021-09-14, Tue, 10:43 AM
Updated on
2021-09-15, Wed, 11:55 PM
Licensed under