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 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>
);
}