QiitaのコードブロックをHACKする

## Overview

この記事では「**コードブロックのHACK**＝通常とは違う使用法」をご紹介します。

以下のようなコードブロックを作れるようになります。

```css:<font color='salmon'><b>Error</b></font>
Error: hoge
```

```bat:<font color='gold'><b>Warn</b></font>
Warn: fuga
```

```nesasm:<font color='gren'><b>Success</b></font>
Success: piyo
```

```diff_java:Diff
- hoge
fuga
+ piyo
```

```math
1+1=2
```


## コードブロックとは

:::note
「これはプログラミングコードですよ！」と示すかたまりを「コードブロック」と呼びます。
```js:hello.js
console.log('Hello, World!')
```
このコードブロックは、以下のように記述されています。

````
```js:hello.js
console.log('Hello, World!')
```
````
:::

Qiitaのコードブロックは、以下の要素で構成されています。
1. プログラミングコード
1. シンタックスハイライト（色づけ）
1. **ファイルパス・ファイル名の注釈**
1. **シンタックスハイライトを解釈する言語の指定**

この記事では、3と4の「HACKした」使い方を紹介します。

## 注釈をHACKする

注釈部分に制限はありません。
例えば「これはエラー文です」という注釈を書くこともできます。

```:Error
エラーログ
```

````
```:Error
エラーログ
```
````

### 注釈に色をつける

`<font color = 'color' >`タグを使用することで、注釈に色をつけることができます。
```:<font color='salmon'>Error</font>
エラーログ
```

````
```:<font color='salmon'>Error</font>
エラーログ
```
````


### 注釈を太字にする
`<b>`タグを使用することで、注釈を太字にすることができます。

```:<font color='salmon'><b>Error</b></font>
エラーログ
```

````
```:<font color='salmon'><b>Error</b></font>
エラーログ
```
````

https://qiita.com/kohki_takatama/items/3abb4cb2a4c6c9ca17e8


## 言語指定をHACKする
シンタックスハイライトの言語もHACKしてみましょう。

特定の言語を指定することで、コード部分の色をある程度コントロールできます。
### 赤文字：CSS
```css:<font color='salmon'><b>Error</b></font>
Error: hoge
hogefuga
```
````
```css:<b><font color='salmon'>Error</font></b>
Error: hoge
hogefuga
```
````

<details><summary><font color="salmon">赤文字</font>になる言語一覧</summary>

言語によって、装飾の法則が異なります。
```css
css email sass scss slim xpath xquery
```
</details>


### 黄文字：coq
```coq:<font color='gold'><b>Warn</b></font>
warn: hoge
hogefuga
```
````
```coq:<font color='gold'><b>Warn</b></font>
warn: hoge
hogefuga
```
````

<details><summary><font color="gold">黄文字</font>になる言語一覧</summary>

言語によって、装飾の法則が異なります。
```coq
coq batchfile coq gtc-cmm ssh viml
```
</details>

### 緑文字：nesasm
```nesasm:<font color='gren'><b>Success</b></font>
success: hoge
hogefuga
```
````
```nesasm:<font color='gren'><b>Success</b></font>
success: hoge
hogefuga
```
````
※ <font color="gren">gren</font>は本来<font color="green">green</font>のtypoなのですが、いい感じの緑色になってくれる魔法の言葉です。
→[コメント](https://qiita.com/kohki_takatama/items/b71da2996e487a9211bd#comment-2697f1eaf35295c9d90e)で補足いただきました！ありがとうございます。

<details><summary><font color="gren">緑文字</font>になる言語一覧</summary>

言語によって、装飾の法則が異なります。
```nesasm
nesasm actionscript cfc coffeescript ecl haxe hcl js jsonnet jsx lasso livescript minizinc nasm nesasm postscript qml rml sieve smalltalk terraform ts tsx
```

```cfc
success: cfscript
```
```idris
success: idr
```
</details>

### 青文字：prolog
```prolog
prolog digdag moonscript nginx yaml
```

### 紫文字：plist
```plist
plist hocon
```

### 青&黄：sed
```sed
aaa
gaa
npx
d
```

## 知っておくと良い正規の機能

順番が前後しますが、正規の機能もご紹介します。

### diff
差分の表示を行います。`+` / `-` を行頭につける必要があり、インデントがずれるなどの手間もありますが、理解を大きく補助してくれます。

`diff_javascript`など、diff_言語 と記述することで、言語のシンタックスハイライトとdiffを合わせて使うことができます。

```diff_javascript
- const hoge = "hoge"

const fuga = "fuga"

+ const piyo = "piyo"
```

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#diff%E3%81%A8%E4%BB%96%E3%81%AE%E8%A8%80%E8%AA%9E%E3%81%AE%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E5%90%8C%E6%99%82%E3%81%AB%E4%BD%BF%E3%81%86

### MathJax

数式を記述します。
```math
\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](https://www.tohoho-web.com/ex/mathml.html) の様に数字は `<mn>`, 識別子は `<mi>`, 演算子は `<mo>` で囲む等は不要で比較的簡単に数式を記述することができます。

https://www.tohoho-web.com/ex/mathjax.html

アルファベットはそのまま出力されるため、以下のような使い方もできなくはないです。
```math
Let's Try
```

````
```math
Let's Try
```
````

### 追記：MathJaxの文字の大きさ

[コメント](https://qiita.com/kohki_takatama/items/b71da2996e487a9211bd#comment-14067aa6e0aa1328176d)いただきました！MathJaxの場合、文字の大きさを変えることもできるようです。

> $\tiny\color{red}{\text{Let's Try}}$
> $\small\color{red}{\text{Let's Try}}$
> $\color{red}{\text{Let's Try}}$
> $\large\color{red}{\text{Let's Try}}$
> $\Large\color{red}{\text{Let's Try}}$

```
$\tiny\color{red}{\text{Let's Try}}$
$\small\color{red}{\text{Let's Try}}$
$\color{red}{\text{Let's Try}}$
$\large\color{red}{\text{Let's Try}}$
$\Large\color{red}{\text{Let's Try}}$
```

:::note
注意事項・サマリなどの **「強調したいけど、目次には表示したくない」** 時に使えますね。

$\Large{\text{※ sudo rm -rf /* は実行しないで！！！！}}$

$\Large{\text{→ 全てのファイルが吹き飛ぶということです}}$

など・・・
:::



## おわりに
ここまでお読みいただきありがとうございました。

ネタ半分、実用性半分で書いてみました。
改めてではありますが、正規の使用法でないものもご紹介しました。乱用すると記事の誤解を招くことにもつながります。

用法用量を守って、楽しくご利用ください👌

---

### 余談：気になる記法があった時・・・
「この記事、どう書かれてるんだろう？」と気になったら、「マークダウンで本文を見る」を使ってみてください。

引用する時も便利です。

| `⋯` から 「マークダウンで本文を見る」 | 記述内容を見ることができます |
|:-:|:-:|
| ![スクリーンショット 2025-01-18 8.17.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/5be7f66e-c006-14ef-f8c1-4a6d93088b94.jpeg)| ![スクリーンショット 2025-01-20 21.17.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/5348cce1-bc4d-a549-f0ed-28c30aa8d6a3.jpeg) |


## 参考
https://qiita.com/Qiita/items/e84f5aad7757afce82ba

https://github.com/rouge-ruby/rouge/blob/master/docs/Languages.md

https://qiita.com/kohki_takatama/items/3abb4cb2a4c6c9ca17e8