【どっち？】markdown? syntaxhighlight?

Question

お世話になっております。Ezです。

このサイトに限らず、様々なサイトでコード（Java php shellscript python perl ・・・etc）を記載して紹介されてますが、### 背景を黒くして、重要そうな単語？の部分はピンクだったり緑だったりと、色鮮やかにしているるのはどんな技術でしょうか？

個人的にとても見やすくて、自分でも使ってみたいと思っております。

Answer 1

一般的なサイトでは Markdown などのテキストを解析して html 化するときに、コードの部分だけをシンタックスハイライトのライブラリーを呼び出して解析させることが多いです。

どうやって使うかは使ってみたい状況によります。

Web アプリを作っている中で使いたいのであれば、開発している言語のシンタックスハイライトのライブラリーを探してください。メジャーな言語であれば大抵あると思います。

ブログなどサーバーサイドを触れない状況でハイライトしたい場合には JavaScript のライブラリーでやることができます。ただ、この場合はロード時に解析して色をつけるのでタイムラグが出ますし、ライブラリーの分だけ少しロード量が増えます。
Web アプリでもサーバーサイドでやらずに JavaScript でハイライトすることもあります。

また、ソースを渡してハイライトした html にするようなローカルで使えるツールもあります。

JavaScript やツールなどは以下のサイトで紹介されていました。

• あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.net

個人的にはブログを書く場合などは emacs の htmlize という機能を使って、emacs の表示を htmlにして貼り付けています。

Answer 2

すでに ベストアンサーが決まっていますが、
参考情報として、シンタックスハイライトのライブラリーの１つとして pygments を紹介したいとおもいます。

• Pygnents. python syntax highlighter

　オンラインデモ　もあります。

日本語の詳細な紹介ページもあります。
Pygments 利用ノート¶

...
Pygments とは何だ。
「プログラムコード片を表すテキストを入力とし、 部分部分に着色等の装飾を指示する命令コードを付加したテキストを出力する Python 製パッケージ」とでも言えばいいのだろうか。
...

標準でサポートされていない言語についても、簡単にその言語に即したハイライト処理を作成することができます。
私は uwsc という言語に対するハイライト処理の試作をしたことがあります。
katoy/uwsc-pygments-lexer

Comments

[fuzzball]

日本語紹介ページのURLが変更になってますね。
https://showa-yojyo.github.io/note/python-pygments.html

Answer 3

私の場合、コードを紹介したりする際には

• はてなブログの場合はスーパーpre記法
• はてなブログで無い場合にはGistsを貼り付け

というようにしていることが多いです。

また、Qiitaなどはコードを書くのと同様にしてシンタックスハイライトを使用することが出来ますね。

色などを細かく指定したい場合には他の方が書かれているようにJavaScript等用いたほうが良いかと思います。

Answer 4

シンタックスハイライトを付けるライブラリーやツールによるものですね。
Syntax Highlighter とかで検索すると見つかると思います。

Markdownは、マークアップフォーマットなので、
Markdownで書いたドキュメントをHTMLに変換したあとで、
Syntax Highlighterを適用します。

もしくは拡張Markdownで独自にシンタックスハイライトをサポートしているとかも
あると思います。
具体的には知りませんが。