【質疑応答シリーズ】バックエンドから返されるjsonの出力をフォーマットし、コードを強調表示する方法

記事ディレクトリ

1. 問題: バックエンドが`json`書式設定を返さないため、書式設定して強調表示し`json`て Web ページに表示したいと考えています。

最近、クラスメートが私に次のような質問をしました。

彼の問題は、バックエンドがjson書式設定を返さないことであり、それを書式設定して強調表示しjsonて Web ページに表示したいと考えています。

以下は、json何も処理せずにバックエンドによって返されます。

望ましい効果

このように、望ましい効果は次のとおりです。

望ましい効果

つまり、左側は表示したい効果であり、右側はコードが強調表示されていない書式設定された効果です。

したがって、上記の問題は 2 つのステップで解決する必要があります: 1. 出力のフォーマット 2. コードの強調表示

2つ目は、json形式で出力する方法です。

書式設定されていない JSON文字列を書式設定して整形するために使用したい場合はJavaScript、組み込みJSONオブジェクトのstringify()メソッドを使用できます。このメソッドはJSONオブジェクトを取得し、それをフォーマットされた文字列に変換します。

JavaScript以下は、書式設定と美化を使用した JSONサンプルコードです。

// 未格式化的 JSON 字符串
var unformattedJson = '{"name":"John","age":30,"city":"New York"}';

// 将 JSON 字符串解析为对象
var jsonObject = JSON.parse(unformattedJson);

// 将对象转换为格式化后的 JSON 字符串
var formattedJson = JSON.stringify(jsonObject, null, 2);

console.log(formattedJson);

印刷結果は次のようになります。

書式設定されているが強調表示されていない効果

コードの解釈:

JSON.stringify(jsonObject, null, 2);

最初のパラメータはJSONフォーマットされるオブジェクトを表します（文字列ではありません）。
2 番目のパラメータは、オブジェクトプロパティの値をフィルタリングおよび変更するために使用されるオプションの置換関数です。この例では、を渡しますnull。これは置換がないことを意味します
3 番目の引数は、文字列をインデントするか、インデントするスペースの数を指定するオプションの空白引数です。この例では、2インデントのレベルごとに 2 つのスペースを示すを渡しました。

これにより、jsonフォーマットされた出力が得られます。次に、コードのハイライトに色を付けるという 2 番目の問題を解決しましょう。

3. コードのハイライトに色を付けます

実際には、コードを強調表示するためのサードパーティライブラリが多数あり、一般的に使用されるライブラリはhighlight.jsやなどPrism.jsです。使い方は似ていますので、以下のライブラリを例に使い方を見てみましょう。

Web ページで直接使用します。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
</head>
<body>
  <pre>
    <code class="language-javascript">
    {
      "name": "John",
      "age": 30,
      "city": "New York"
    }
    </code>
  </pre>

  <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
</body>
</html>

上記のコードをローカルにコピーしhtml、それを開いて効果を確認します。

最終効果

上記jsおよびcss参照は外部ですcdn。JSファイルをプロジェクトと一緒に移動したい場合は、上記のリンクを直接開いて、同じレベルのディレクトリ另存为に保存することもできます。パスを相対パスに変更することを忘れないでください。html

画像-20230703142736642

フロントエンドエンジニアリングプロジェクトで強調表示を使用する場合、つまりnpmメソッドを使用する場合、対応するメソッドも提供されます。

詳細は公式サイト https://prismjs.com/ をご覧ください。

Web フロントエンド開発、面接、フロントエンド学習ルートで問題がある場合は、V: imqdcnn を追加してください。無料で質問に回答し、長年業界に深く携わってきた技術専門家がバグの解決を支援します。

優秀なWEBフロントエンド開発エンジニアになってください！