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.
Use
bash
as a language in yourSyntaxHighlighter
Component props rather thancurl
andInstead writing only
\
in the end of each line, write\n
, which move code to the next line.Here the working code of yours: