在反應語法熒光筆中突出顯示curl代碼片段-有解無憂

我試圖在我的 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>
);

這是沙箱鏈接

輸出是單行的，而不是垂直對齊的。

uj5u.com熱心網友回復：

bash在你的SyntaxHighlighter組件道具中作為一種語言使用，而不是curl和

而不是只\在每一行的末尾寫入\n，write ，它將代碼移動到下一行。

這是您的作業代碼：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/357446.html

標籤：javascript 反应卷曲反应语法高亮

上一篇：如何更新/添加新資料以回應功能組件物件？

下一篇：將時間戳轉換為一個陣列