GDD Blog: [Other]コードのシンタックスハイライト

2021年1月9日土曜日

[Other]コードのシンタックスハイライト

コードをハイライトするために、SyntaxHighlighterを使っていたんですがリンク切れで遅くなていました。
で、とりあえずスタイルやJSのリンクを消したものの、コードのサンプル表示がかっこ悪かったので、これを機に修正しました。
で、使ったのが、「highlight.js」です。
SyntaxHighlighterとくらべ軽量で言語の対応も多いらしいです。ということで使い方。
↓のコードを<head>に埋め込めばOK

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

サポートしている言語は、GitHubのほうを参照で。
使い方はhttps://highlightjs.org/usage/を参照。

当サイトは、VisualSutudio風のデザインを使っていますが、このデザイン枠がなんです。

ということで、スタイルの一部を改変。現状はこのスタイル(.hljs)が必ずセットされるので、それをチョット改変。

<style type='text/css'>
.hljs {
  display:block;
  border:1px solid #ffa500;
}
</style>

デモサイトがあり、こっちも便利。分かりやすい。参考になる。

取り合えず、チョットやな感じで何とかしたいこと。

１行目の空行<pre><code>の後ろに改行入れると、改行されちゃう
<と>。コードをそのまま貼り付けれない。１行に1個までなら何とかなるっぽいけど、理由がわからない。js内に変換してそうなコードはあるんだけど。。。うまく動いていないのだろうか

・・・こいつら何とかしたい。

0 件のコメント:

コメントを投稿