ハイライト.jsを使用してコードを強調表示する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ハイライト.jsを使用してコードを強調表示する

巴扎黑

Aug 21, 2017 am 10:39 AM

javascriptハイライト

この記事では、コードを強調表示するために、highlight.js を使用するための js を主に紹介します。これは、それを必要とする友人がそれを参照するのに非常に役立ちます。文法は、Java、js、php、その他の言語であっても、キーワードを自動的に強調表示します。

それで、私は数日前にブログを書きましたが、コードに出会ったとき、自然に他の人のウェブサイトがいかに美しいかを思い出しました。

公式のいじくりが始まりました。

いじる前に他のウェブサイトにアクセスして確認してください。ショートブックを貼り付ける効果は次のとおりです。

キーワード、メソッド名、文字列がすべて異なる色で表示されます。コードはあまり強調表示されていませんが、許容範囲内です。それでドキュメントを見に行って、次のようなものを見つけました:

<pre class="hljs javascript"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">name,age,sex</span>) </span>{
  <span class="hljs-built_in">console</span>.log(name+age+sex);
}
<span class="hljs-comment">//要是我这样传,name就成了18，age成了王二了。</span>
getPersonInfo(<span class="hljs-string">&#39;18&#39;</span>,<span class="hljs-string">&#39;王二&#39;</span>,<span class="hljs-string">&#39;男&#39;</span>);
<span class="hljs-comment">//所以可以这样写</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">args</span>)</span>{
  <span class="hljs-built_in">console</span>.log(args.name+args.age+args.sex);
}
getPersonInfo({name:<span class="hljs-string">&#39;王二&#39;</span>,age<span class="hljs-string">&#39;18&#39;</span>,sex:<span class="hljs-string">&#39;男&#39;</span>});</code>

hljs? ?これは間違いなくそれです。そこで私たちは主人公であるhighlight.jsを見つけました。

highlight.js公式サイト

highlightjsの使い方は公式サイトで直接見ることができます

ここでは主に使用中に遭遇した落とし穴と最終的な解決方法を書きます。

1. 熱豆腐を食べるのが不安な場合は、最初が最も難しいことです

公式ウェブサイトのドキュメントによると、使用するには3行のコードのみが必要で、非常に便利です。テストするために小さなデモを書きました。それでも非常に効果的です。

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="external nofollow" rel="stylesheet"> 
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 
<script >hljs.initHighlightingOnLoad();</script>

ここでは、bootstarp によって提供される cdn が使用されます。上記の接続を通じて cdn に直接アクセスし、必要なバージョンを選択できます。それはとても簡単です。

この配色もあまり見栄えが良くありません。見栄えの良い色が必要な場合は、公式Webサイトを直接参照してください。 https://highlightjs.org/static/demo/

2. 使いやすければ実際の開発に応用するしかない

とても簡単に適用できてとても満足したので応募しましたそれをプロジェクトに追加します。

その結果、*トラブルが発生しました....

このプロジェクトでは、js の読み込みに require.js を使用し、アプリケーション全体で Angular フレームワークを使用しています。

このように直接書くと明らかに仕様に準拠していないので、コードを変更してrequire.jsを使ってhighlight.jsを読み込むようにします。

require.configにハイライトパス設定を追加します

&#39;highlight&#39;:&#39;http://cdn.bootcss.com/highlight.js/8.0/highlight.min&#39;,

requireコールバック関数でhljs.initHighlightingOnLoad()を実行します;

require(loadList, function ($, angular) {
    $(function () {
      angular.bootstrap(document, [&#39;blogApp&#39;]);
    });
    hljs.initHighlightingOnLoad();
  });

cssはリンクを通じてまだロードされています、またはlessの@importを使用してロードできます、プロジェクトの使用量が少ないため、@import

@import "/lib/highlight/styles/tomorrow-night-eighties.css";

を選択し、HTMLページにコードテストを書きました:

<body>
    <p ng-include="&#39;template/header.html&#39;"></p>
    <p>
      <pre class="brush:php;toolbar:false">
        <code class="lang-javascript">
    function init(){
      $scope.req.getArticle();
      $(&#39;pre code&#39;).each(function(i, block) {
        hljs.highlightBlock(block);
      });
    }
        </code>

以上がハイライト.jsを使用してコードを強調表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles