How to display code within a <code> tag in Next JS?

[kazooi]

When I put some code examples inside a <code> tag in Next JS I got this error message here:

I thought that the <code> tag is prefenting the browser to render the code which is inside, but this example Code is conflicting an error within Next JS

            <code> {mobileMenu && CONTENT} </code>

Can somone let me know how to display code which not gets rendered in Next JS?

Thank you !

[jenovs]

It has nothing to do with Next.js it’s a JSX thing: stuff that’s inside elements in curly braces is treated as JavaScript.

[kazooi]

Is there any way to show up curly braces without an error message?

[jenovs]

For example:

<code>&#123;mobileMenu && CONTENT&#125;</code>

[lasjorg]

I think using template literals and HTML entities are the main choices.

But I would maybe suggest looking for a premade component instead like react-syntax-highlighter if you need to show a lot of code.

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function App() {
  const codeString = "{mobileMenu && CONTENT}";

  return (
    <div className="App">
      <SyntaxHighlighter language="javascript" style={dark}>
        {codeString}
      </SyntaxHighlighter>
    </div>
  );
}

[kazooi]

Thank you !!

@lasjorg I guess this is the solution! I would like to make a code selection which I can use to remember syntax and to learn JavaScript, so I actually need it for a lot of code examples.

I installed react-syntax-highlighter npm i react-syntax-highlighter and I just copied and pasted your code example to show if it works, but I got another error message:

SyntaxError: Unexpected token 'export’

This is my code:

import Layout from '../components/Layout';

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function devlab() {
  const codeString = '{mobileMenu && CONTENT}';

  return (
    <>
      <Layout title="Education">
        <h1>Devlab</h1>
        <div className="devlab-container">
          <div className="devlab-sidebar">

            <div className="devlab-javascript">JavaScript</div>
            <div className="devlab-reactjs">React JS</div>
            <div className="devlab-threejs">Three JS</div>
            <div className="devlab-api-connection">API Connection</div>
          </div>

          <div className="devlab-content">
            <h1>React JS</h1>
            <h5>Open a Modal</h5>
            <p>To open a modal with react..</p>

              <SyntaxHighlighter language="javascript" style={dark}>
                {codeString}
              </SyntaxHighlighter>

          </div>
        </div>
      </Layout>
    </>
  );
}

Do you know why this error message shows up and how can I solve it?

Thank you for help!!

[kazooi]

Oh I just recognized that the error occures because of this line of code:

// import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

It seems like it can not be imported because it could not be found. Do I need to install another library to get acces to the styles?

[lasjorg]

Didn’t test it but you can try this.

SyntaxError: Unexpected token export when using NextJS

---

Edit: I tested it and it works for me. So the import would be.

import { dark } from 'react-syntax-highlighter/dist/cjs/styles/prism';

[kazooi]

@lasjorg Thank you, highly aprechiate your help! It is working now

Just one last question:

When I try to display multiple lines of code, just the first line of code gets displayed, but the rest will be ignored. It looks like this in my editor:

This is what I try to show as code:

  const [mobileMenu, setMobileMenu] = useState(false);

  const toggleMobileMenu = () => {
    setMobileMenu(!mobileMenu);
  };

I paste everything inside the template literals from const codeString:

export default function devlab() {
  const codeString = 'const [mobileMenu, setMobileMenu] = useState(false);';
  ('const toggleMobileMenu = () => {');
  ('setMobileMenu(!mobileMenu);');
  ('{mobileMenu && CONTENT}');

It gets rendered like this:

How can I show the whole code block ?

[lasjorg]

Doesn’t look like your string is correct. Try a template literal instead.

  const codeString = `const [mobileMenu, setMobileMenu] = useState(false);
  ('const toggleMobileMenu = () => {');
  ('setMobileMenu(!mobileMenu);');
  ('{mobileMenu && CONTENT}');`;

But I’m not sure why some of the code is inside strings?

[kazooi]

That´s it, I just forgot the ` !!

Thank you