How to switch languages in React CodeJar ?

[rishab-sharma]

Hi @guilhermelimak ,

I am trying to switch between different languages like in codejar example - https://codepen.io/antonmedv/pen/PoPoGwg

How can this be done with React Codejar ( where to pass the className prop or something similar ) ?

can you help with this or any reference code snippet to apply such themes to React Codejar

[Masynchin]

Same issue. Have you found a solution?

[Masynchin]

Same issue. Have you found a solution?

I just looked at #15 with suggestion to use Prism. @guilhermelimak how can I use highlight.js?

[Masynchin]

I just looked at #15 with suggestion to use Prism. @guilhermelimak how can I use highlight.js?

import { useState } from "react";
import { useCodeJar } from "react-codejar";
import hljs from "highlight.js";
import { CodeLang, codeLangs, codeLangsOptions } from "../config/codeLangs";

const style = {};
const defaultCode = "1 + 2";

const CodeEditor = () => {
  const [code, setCode] = useState(defaultCode);
  const [codeLang, setCodeLang] = useState(codeLangs[0]);

  const editorRef = useCodeJar({
    code,
    onUpdate: setCode,
    highlight: hljs.highlightElement,
    style,
    options: codeLangsOptions[codeLang]
  });

  return (
    <div>
      <div>
        <Dropdown
          options={codeLangs}
          onChange={(arg) => setCodeLang(arg.value as CodeLang)}
        />
      </div>
      <div
        ref={editorRef}
        className={`hljs language-${codeLang}`}
      ></div>
    </div>
  );
};

export default CodeEditor;

I did this, only one issue - no trigger on lang change, it can be created by something like:

<Dropdown
  options={codeLangs}
  onChange={(arg) => {
    setCodeLang(arg.value as CodeLang);
    setCode(code);
}
/>