Example with JS syntax highlight

[cbroberg]

I know it is probably the wrong place to ask.

Any chance of finding an example with react-remarkable that includes JS code highlight?

I have tried everything :(

[satahippy]

import React from 'react';
import Markdown from 'react-remarkable';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-gist.css';

const highlight = (str, lang) => {
    if (lang && hljs.getLanguage(lang)) {
        try {
            return hljs.highlight(lang, str).value;
        } catch (err) {
          console.error(err);
        }
    }

    try {
        return hljs.highlightAuto(str).value;
    } catch (err) {
      console.error(err);
    }

    return '';
};

const MarkdownWithJs = () =>
  
  <Markdown options={{highlight}}>{`
  # Header

  \`\`\`js
  const func = () => {
    // here is your js code
  }
  \`\`\`
  `}</Markdown>;

[satahippy]

\`\`\`js - it's a little bit ugly, but you need to escape ` characters...

[cbroberg]

Thanks @satahippy I much appreciate your help

[firstpersoncode]

why it doesn't work for me ?

import React from 'react';
import Markdown from 'react-remarkable';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-gist.css';

const highlight = (str, lang) => {
    if (lang && hljs.getLanguage(lang)) {
        try {
            return hljs.highlight(lang, str).value;
        } catch (err) {
          console.error(err);
        }
    }

    try {
        return hljs.highlightAuto(str).value;
    } catch (err) {
      console.error(err);
    }

    return '';
};

const MarkdownWithJs = () =>
  
  <Markdown options={{highlight}}>{`
  # Header

  \`\`\`js
  const func = () => {
    // here is your js code
  }
  \`\`\`
  `}</Markdown>;