1

Hexo is A fast, simple & powerful blog framework.
I'm trying to use a jsx in Hexo render, using a plugin hexo-renderer-react like this:

In file Hightlight.jsx:

import React from 'react';

export default function Highlight({children, color}) {
  return (
    <span
      style={{
        backgroundColor: color,
        borderRadius: '2px',
        color: '#fff',
        padding: '0.2rem',
      }}>
      {children}
    </span>
  );
}

But when I use Hexo g to build, A error ocurred:

 err: Error [Nunjucks Error]: code/Highlight.jsx [Line 7, Column 24] expected variable end
      =====               Context Dump               =====
      === (line number probably different from source) ===
    2 | 
    3 | export default function Highlight({children, color}) {
    4 |   return (
    5 |     <span
    6 |       style={{
    7 |         backgroundColor: color,
    8 |         borderRadius: '2px',
    9 |         color: '#fff',
    10 |         padding: '0.2rem',
    11 |       }}>
    12 |       {children}
      =====             Context Dump Ends            =====
      at formatNunjucksError (/root/hexo-workspace/node_modules/hexo/lib/extend/tag.js:171:13)

So, how can I fix this?
Or how can I use react as a component in Hexo markdown?

luhao
  • 70
  • 7
  • It seem like the issue at *line 7* is the `color` prop, is that a string? That's React-wise. I've never used that Hexo framework, but it might have settings that stops you from having dynamic values in `style`? – Aleksandar Apr 08 '23 at 07:29

0 Answers0