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

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

巴扎黑

リリース： 2017-08-21 10:39:54

オリジナル

2508 人が閲覧しました

この記事では、コードを強調表示するために、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>

ログイン後にコピー

それからブラウザを開いて見てみましょう:

完璧。

しかし、ng-bind-html を使用してバックグラウンドから返されたドキュメントを表示する場合:

コードはまったく強調表示されません。よく考えてください。onload 中にレンダリングを

hljs.initHighlightingOnLoad();

ログイン後にコピー

実行しませんか。つまり、それ以降のドキュメントへの変更は実行されません。したがって、明らかに、これではインターフェイスから取得したドキュメントのコードを強調表示できません。

Googleで調べたところ、angular-highlightjsというものを見つけて使用しようとしましたが、公式Webサイトにドキュメントがなかったので、見に行きました。そして、説明書と公式 Web サイトも同様に短く、問題についてこの質問をする人は誰もいなかったので、誰かが答えてくれることを願って質問しました: 質問アドレス

私は、highlight.js は対応するメソッドを提供する必要があると思います、そしてそれは可能ですロード完了後に一度実行すれば良いのですが、残念ながらAPIのドキュメントが英語で読みにくかったので、別の方法を考えることにしました。

この問題の最終的な解決策は、インターフェイスがhighlight.jsを使用してコンパイルされたHTMLを返すことです。バックエンドはnodeを使用するため、cnodeフォーラムで検索したところ、markedがこの問題を解決していることがわかりました。

マークされた設定にハイライト項目を追加するだけです (最初に npm install highlight.js):

var marked = require(&#39;marked&#39;);
var highlight = require(&#39;highlight.js&#39;);
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
  return highlight.highlightAuto(code).value;
 }
});

ログイン後にコピー

返されたドキュメントには、対応するクラスがすでに追加されています。

りー

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