[英]Highlighting curl code snippet in react syntax highlighter
我試圖在我的 React 應用程序中突出顯示 curl 代碼片段。 我正在使用react-syntax-highlighter
。
問題是,curl 代碼沒有正確對齊。 在我的代碼片段下方。
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>
);
這是沙箱鏈接
輸出是單行的,而不是垂直對齊的。
在SyntaxHighlighter
組件道具中使用bash
作為語言,而不是curl
和
只而不是寫\\
中的每一行,寫入結束\\n
,其中移動代碼到下一行。
這是您的工作代碼:
// 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>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.