AngularプロジェクトでPrism.jsを使用するにはどうすればよいですか？
How Use Prism Js Angular Project
1.Prism.jsから話す
Prims.jsは、コード強調表示プラグインです。使い方はとても簡単で、必要な手順は次の3つだけです。
最初のステップは、お気に入りのスキンを選択し、公式Webサイトでコード言語を強調表示することです
2番目のステップは、対応するjsファイルとcssファイルをダウンロードすることです。
3番目のステップは、ダウンロードしたjsファイルとcssファイルをコードを表示したページに導入し、対応するクラスをコードを含むコードタグに追加することです。
上記の3つの手順を実行すると、簡単なコードの強調表示操作を完了することができます。形成されたhtml構造を観察することにより、Prism.jsが実際に行うことは、クラス名の異なるラップスパンラベルを使用して、コードタグに含まれるコードの一部を分割するために実際にjsを使用することであることがわかります。次に、事前に設定したスキン、つまりダウンロードしたcssファイルを使用してハイライト効果を実現します。ファイルが異なればスキンも異なります。
2. AngularプロジェクトでPrism.jsを使用する際の問題は何ですか？
従来のマルチページアプリケーションでPrism.jsを使用することは基本的に問題ありませんが、AngularのようなシングルページアプリケーションでPrism.jsを使用するといくつかの問題が発生します。この問題は主に2つの側面で現れます。
まず、Prism.jsのコードがspanタグでラップされたhtmlに変換され、即時関数で実行されます。 Angularでは、この関数を実行すると、多くのページが初期化されない可能性があるため、ルーティングを介してこれらのページにジャンプすると、コードの強調表示効果を確認できません。
次に、Angularにhtmlとcssを含むtsコードがあります。これらのコードは、ES6バックティック（ `）でラップされることがよくあります。 Prism.jsネイティブスキンは、tsファイルに含まれるhtmlおよびcssコードの強調表示をサポートしていません。
3.それを解決する方法は？
Ali ant設計の解決策を参照してください。2つの問題は、次の方法で解決されます。
問題2の場合、ネイティブのPrism.jsメソッドを拡張してtsファイルでのhtmlおよびcssコードの強調表示をサポートするようにすることで、拡張コードは次のように記述されます。
const Prism = require('node-prismjs') Prism.languages.angular = Prism.languages.extend('typescript', {}) Prism.languages.insertBefore('angular', 'string', { 'template-string': { pattern: /template[s]*:[s]*`(?:\[sS]|[^\`])*`/, greedy : true, inside : { 'html': pattern: /`(?:\[sS] } }, 'styles-string' : { pattern: /styles[s]*:[s]*[[s]*`(?:\[sS]|[^\`])*`[s]*]/, greedy : true, inside : { 'css': pattern: /`(?:\[sS] } } }) module.exports = Prism問題1の場合、最初に選択したスキンスタイル（cssファイルの内容）をルートコンポーネントスタイルのapp.component.lessファイルにコピーします。次に、Prism.js拡張機能のhighlightメソッドを呼び出して、表示するコードを変換し、spanタグに含まれるhtmlコードを取得します。次に、encodeURIComponentを使用してこのコードをエンコードし、エンコード結果を取得します。次に、この文字化けしたようなコードを、コードの強調表示を実現するために表示する必要があるWebサイトの部分に配置します。
var angularPrism = require('./angular-marked.js') var res = encodeURIComponent(angularPrism.highlight(code, Prism.languages['angular'])) return resencodeURIComponentを使用する理由は、highlightメソッドを使用して変換されたコードには、二重引用符（ '）、一重引用符（'）、および逆引用符（ `）の3つの記号が含まれる可能性が高いためです。このコードでは、文字変数に割り当てることができません。それを収容するための記号はありません。