Overview
この記事では「コードブロックのHACK＝通常とは違う使用法」をご紹介します。
以下のようなコードブロックを作れるようになります。
Error: hoge
Warn: fuga
Success: piyo
- hoge
fuga
+ piyo
1+1=2
コードブロックとは
「これはプログラミングコードですよ！」と示すかたまりを「コードブロック」と呼びます。
console.log('Hello, World!')
このコードブロックは、以下のように記述されています。
```js:hello.js
console.log('Hello, World!')
```
Qiitaのコードブロックは、以下の要素で構成されています。
- プログラミングコード
- シンタックスハイライト（色づけ）
- ファイルパス・ファイル名の注釈
- シンタックスハイライトを解釈する言語の指定
この記事では、3と4の「HACKした」使い方を紹介します。
注釈をHACKする
注釈部分に制限はありません。
例えば「これはエラー文です」という注釈を書くこともできます。
エラーログ
```:Error
エラーログ
```
注釈に色をつける
<font color = 'color' >タグを使用することで、注釈に色をつけることができます。
エラーログ
```:<font color='salmon'>Error</font>
エラーログ
```
注釈を太字にする
<b>タグを使用することで、注釈を太字にすることができます。
エラーログ
```:<font color='salmon'><b>Error</b></font>
エラーログ
```
言語指定をHACKする
シンタックスハイライトの言語もHACKしてみましょう。
特定の言語を指定することで、コード部分の色をある程度コントロールできます。
赤文字：CSS
Error: hoge
hogefuga
```css:<b><font color='salmon'>Error</font></b>
Error: hoge
hogefuga
```
赤文字になる言語一覧
言語によって、装飾の法則が異なります。
css email sass scss slim xpath xquery
黄文字：coq
warn: hoge
hogefuga
```bat:<font color='gold'><b>Warn</b></font>
warn: hoge
hogefuga
```
黄文字になる言語一覧
言語によって、装飾の法則が異なります。
coq batchfile coq gtc-cmm ssh viml
緑文字：nesasm
success: hoge
hogefuga
```nesasm:<font color='gren'><b>Success</b></font>
success: hoge
hogefuga
```
※ grenは本来greenのtypoなのですが、いい感じの緑色になってくれる魔法の言葉です。
緑文字になる言語一覧
言語によって、装飾の法則が異なります。
nesasm actionscript cfc coffeescript ecl haxe hcl js jsonnet jsx lasso livescript minizinc nasm nesasm postscript qml rml sieve smalltalk terraform ts tsx
success: cfscript
success: idr
青文字：prolog
prolog digdag moonscript nginx yaml
紫文字：plist
plist hocon
青&黄：sed
aaa
gaa
npx
d
知っておくと良い正規の機能
順番が前後しますが、正規の機能もご紹介します。
diff
差分の表示を行います。+ / - を行頭につける必要があり、インデントがずれるなどの手間もありますが、理解を大きく補助してくれます。
diff_javascriptなど、diff_言語 と記述することで、言語のシンタックスハイライトとdiffを合わせて使うことができます。
- const hoge = "hoge"
const fuga = "fuga"
+ const piyo = "piyo"
MathJax
数式を記述します。
\begin{eqnarray}
i\hbar\frac{\partial}{\partial t}\psi(x,t)=
\left(-\frac{\hbar^2}{2m}+V(x)\right)\psi(x,t)
\end{eqnarray}
MathJaxとは
- JavaScript を用いて数式を記述するライブラリです。
- LaTeX の記法を用いて数式を記述することができます。
- MathML の様に数字は
<mn>, 識別子は<mi>, 演算子は<mo>で囲む等は不要で比較的簡単に数式を記述することができます。
アルファベットはそのまま出力されるため、以下のような使い方もできなくはないです。
Let's Try
```math
Let's Try
```
おわりに
ここまでお読みいただきありがとうございました。
ネタ半分、実用性半分で書いてみました。
改めてではありますが、正規の使用法でないものもご紹介しました。乱用すると記事の誤解を招くことにもつながります。
用法用量を守って、楽しくご利用ください👌
余談：気になる記法があった時・・・
「この記事、どう書かれてるんだろう？」と気になったら、「マークダウンで本文を見る」を使ってみてください。
引用する時も便利です。
⋯ から 「マークダウンで本文を見る」 |
記述内容を見ることができます |
|---|---|
 |
 |
参考