Highlighting curl code snippet in react syntax highlighter

Question

I was trying to highlight curl code snippet in my react application. I am using react-syntax-highlighter for the same.

The problem, curl code is not coming properly aligned. below my code snippet.

import SyntaxHighlighter from 'react-syntax-highlighter';
import { github } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const getCurlSnippet = (loadId, text) =>{
  const token = localStorage.getItem("token");
  const PARSE_API_URL = "API URL";
  return `curl ${PARSE_API_URL} \
    -H 'authorization: ${token}' \
    -H 'Content-Type: application/json' \
    --data-raw '{"loadId":"${loadId}","text":"${text}"}' \
    --compressed`;
}

const getHighlightSnippet = () => (
    <SyntaxHighlighter
        language="curl"
        style={github}
        customStyle={{borderRadius: "12px", padding: "16px", background: "rgb(227 224 224)"}}
    >
        {getCurlSnippet("U134IJ", "Hello world")}
    </SyntaxHighlighter>
);

Here is the sandbox link

Output is coming in single line, instead of vertically aligned.

tried also, syntax is highlighting, but it’s coming in one line. — abinas patra
– abinas patra, Commented Nov 16, 2021 at 13:14
add \n in your code. rather than only \` . \n` move the code to next line. — Pradip Dhakal
– Pradip Dhakal, Commented Nov 16, 2021 at 13:21

Pradip Dhakal · Accepted Answer · 2021-11-16 13:22:25Z

2

Use bash as a language in your SyntaxHighlighter Component props rather than curl and

Instead writing only \ in the end of each line, write \n, which move code to the next line.

Here the working code of yours:

// app.js

import SyntaxHighlighter from "react-syntax-highlighter";
import { github } from "react-syntax-highlighter/dist/esm/styles/hljs";
import "./styles.css";

const getCurlSnippet = (loadId, text) => {
  const authToken = "toekn";
  const PARSE_API_URL = "API_URL";
  return `curl '${PARSE_API_URL}' \n
    -H 'authorization: ${authToken}' \n
    -H 'Content-Type: application/json' \n
    --data-raw '{"loadId":"${loadId}","text":"${text}"}' \n
    --compressed`;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <SyntaxHighlighter
        language="bash"
        style={github}
        customStyle={{
          borderRadius: "12px",
          padding: "16px",
          background: "rgb(227 224 224)"
        }}
      >
        {getCurlSnippet("U134IJ", "Hello world")}
      </SyntaxHighlighter>
    </div>
  );
}

answered Nov 16, 2021 at 13:22

Pradip Dhakal

1,9821 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abinas patra Over a year ago

oh ho, too silly, was almost there, thanks, it works perfectly:)

Collectives™ on Stack Overflow

Highlighting curl code snippet in react syntax highlighter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related