Estaba tratando de resaltar el fragmento de código curl en mi aplicación de reacción. Estoy usando react-syntax-highlighter para lo mismo.
El problema es que el código curl no se alinea correctamente. debajo de mi fragmento de código.
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> );Aquí está el enlace de la caja de arena
La salida viene en una sola línea, en lugar de alinearse verticalmente.
Use bash como lenguaje en sus accesorios del componente SyntaxHighlighter en lugar de curl y
En lugar de escribir solo \ al final de cada línea, escriba \n , que mueve el código a la siguiente línea.
Aquí el código de trabajo tuyo:
// 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> ); }