Gist で利用可能なHTML タグ

gist-html-tag.md

HTML Tags Available within Gist

markdown は^HT_ML の簡易記法である

Gist ではGFM にしたがったmarkdown 記法を利用することが出来るが，これらだけでは 物足 ( ものた ) りない部分がある．Gist 内でも利用できるHTML タグを確認しておこう．

About Gist (Folding)

Gist

GitHub から提供されるコードファイルを投稿共有することのできるサービス

DEMO TEXT

Gist で利用可能なHTML タグで前項を書いていた．コードを明らかにしておきたい．

<div align = "center">
  <p>
    <q>markdown は<sup>HT</sup><sub>ML</sub> の簡易記法である</q>
  </p>
</div>
<p>
  <samp>Gist</samp> では<kbd>GFM</kbd> にしたがったmarkdown 記法を利用することが出来るが，これらだけでは
  <ruby>
    <rb>物足</rb>
    <rp>(</rp>
    <rt>ものた<rt>
    <rp>)</rp>
  </ruby>
  りない部分がある．<ins><samp>Gist</samp> 内でも利用できるHTML タグを確認しておこう．</ins>
  <!-- GFM とはGitHub Flavor Markdown の略称 -->
</p>

<details>
<summary>About Gist (Folding)</summary>

<dl>
  <dt> Gist </dt>
  <dd> GitHub から提供されるコードファイルを投稿共有することのできるサービス </dd>
</dl>

</details>

TOC

• HTML Tags Available within Gist
  • DEMO TEXT
  • TOC
  • BASIC MARKDOWN SYNTAX
  • HTML TAGS
  • INSERT IMAGE
• Digression
  • Problem of Japanese language

画像挿入の場合だけ別節にしておいた．

BASIC MARKDOWN SYNTAX

基本的なmarkdonw 記法については以下を参照すれば網羅できるだろう．

Markdown Cheat Sheet | Markdown Guide

この他，markdown の代表的なパーサであるmarkdown-it の拡張を確認しておけば良いだろう．

• Markdown it! - GitHub
  • markdown-it demo

おおよそこれらが世間にある一般的なmarkdown 記法となっていると思われる．

ただし，これらのmarkdown がすべてどこでも利用できるわけではないので注意が必要である．
GFM ではこれらのうちいくつかが利用できない．

HTML TAGS

HTML タグ内ではmarkdown 記法は利用できないので注意が必要である．したがって，上のチートシートを参照してmarkdown 記法に対応するHTML タグを確認しておくと良いだろう．

• DO NOT WORK TAG
• Comment Out
• Character Decoration
• Line Breaks
• Align attribute
• Multi Tag Combination

DO NOT WORK TAG

先に利用できないHTML タグを確認しておきたい．以下のタグはサニタイズされるようだ．

<blink> <big> <button> <mark> <small> <span> <style> <u> <nobr>

Comment Out

コメントアウト．

Do NOT comment out here
<!--
  Comment out here
-->
Do NOT comment out here

Do NOT comment out here

Do NOT comment out here

Character Decoration

markdown 記法で利用可能な文字装飾は書き出していない．もちろん，markdown 記法に対応したHTML タグも利用することが出来る．

HTML Tags	Sample Code	Sample Result
<ins>	<ins>Inserted</ins>	Inserted
<kbd>	<kbd>Keyboard</kbd>	Keyboard
<q>	<q>Quote</q>	Quote
<samp>	<samp>Sample</samp>	Sample
<sub>	<sub>Sub</sub>Script	SubScript
<sup>	<sup>Super</sup>Script	SuperScript

パーサによってはこれらのタグをmarkdown 記法で書き出すことが出来る．Gist では出来ない．

ins tag

<u> タグで下線は引けないが，<ins> タグで下線が引ける．

before text <ins>Inserted text</ins> after text

before text Inserted text after text

before text <u>Inserted text</u> after text

before text Inserted text after text

kbd tag

キーボード入力部分を示す．シングルクォーテーション` 囲むインラインコードとは少し異なる．

<kbd>KEYBOARD</kbd> <kbd>Ctrl</kbd> <kbd>Tab</kbd>

KEYBOARD Ctrl Tab

`KEYBOARD` `Ctrl` `Tab`

KEYBOARD Ctrl Tab

q tag

" と<q> では少し異なる．

<q>QUOTATION</q>

QUOTATION

"QUOTATION"

"QUOTATION"

samp tag

プログラムからの出力サンプルを示すタグ．等幅フォントが適用される．

Sample: <samp>Sample</samp>, <br>
サンプル: <samp>サンプル</samp>

Sample: Sample,
サンプル: サンプル

sub tag and sup tag

下付き文字．

H<sub>2</sub>O

H₂O

---

上付き文字．

e<sup>x</sup>

e^x

Line Breaks

強制改行．

見栄えのために利用すべきではないらしい．HTML ではCSS を編集することで見栄えをよくすることを想定する．
しかし，Gist などの場合ではCSS を変更できないので注意しながら利用していこう．

あるいは<p> タグを利用すると良いだろう．

1st text line <br> 2nd text line

1st text line
2nd text line

Align attribute

align 属性を利用して揃えを変更することが出来る．

HTML5 以降ではalign 属性は廃止されているが，Gist 内ではstyle が利用できないようだ．すなわち，以下のような整列は有効にならない．

<p style = "text-align:center;">
  Sample Centering (Do not work centering)
</p>

Sample Centering (Do not work centering)

しぶしぶalign 属性を利用するしかなさそうである．

CSS を眺めていればどこかに中央揃えできるようなクラスがあるかもしれないが，あまりよく分からない．

Center

<div align = "center">
  DIV Centering
</div>

DIV Centering

<p align = "center">
  P Centering
</p>

P Centering

Left or Right

<div align = "left">
  DIV Flush Left
</div>

DIV Flush Left

<p align = "left">
  P Flush Left
</p>

P Flush Left

<div align = "right">
  DIV Flush Right
</div>

DIV Flush Right

<p align = "right">
  P Flush Right
</p>

P Flush Right

Multi Tag Combination

ruby

ルビ．

<p> タグ無しに1行に収めようとすると上下にガタガタするので注意．

<p>
  綺麗な
  <ruby>
    <rb> 薔薇 </rb>
    <rp> ( </rp>
    <rt> バラ </rt>
    <rp> ) </rp>
  </ruby>
  には棘がある
</p>

綺麗な 薔薇 ( バラ ) には棘がある

definition list

定義リスト．

<dl>
  <dt> TERM </dt>
  <dd> DEFINITION </dd>
</dl>

TERM

DEFINITION

folding

折りたたみ．

使う際には適当に<br> タグを挿入しておくと見栄えが良くなる．

before text

<details>
<summary>CLOSED folding</summary>

Folding closed by default.<br>
Folding closed by default.

</details>

after text

before text

CLOSED folding

Folding closed by default.
Folding closed by default.

after text

before text

<details open>
<summary>OPEN folding</summary>

Folding open by default.<br>
Folding open by default.

</details>

after text

before text

OPEN folding

Folding open by default.
Folding open by default.

after text

INSERT IMAGE

画像の挿入方法はmarkdown から提供されているものとHTML タグの2種類ある．

with markdown

markdown では横幅が100% で表示される．

![alt](https://link)

![alt]

[alt]: https://link

表などに画像を挿入したい場合には，2つ目の方法を利用するとプレーンテキストもすっきりとした表記になるだろう．

with HTML

HTML ではwidth から表示サイズを変更することが出来る．大きくなってしまう場合には<img> タグを利用すると良いだろう．

<img src = "https://link" width = "80%" alt = "alt">

Insert Figure with Caption

画像にキャプションを付与したい場合には<figcaption> タグを<figure> タグ内で使用すれば良い．

ここで挿入する画像はmarkdown 記法による![alt](https://link) によって挿入すると上手くいかない．<img> タグによって挿入しよう．

<div align = "center">
  <figure>
    <img
    src = "https://3.bp.blogspot.com/-kvbJ2Lk3e5g/Ur1GXV2yTsI/AAAAAAAAcck/uu_54SA8zwY/s800/trex_kokkaku.png"
    width = "50%"
    alt = "Dinosaur">
    <br>
    <figcaption>
      Dinosaur fossil image from いらすとや
    </figcaption>
  </figure>
</div><br>

Dinosaur fossil image from いらすとや

中央揃えにしておかないと<figcaption> によるキャプションと本文の見分けが付かなくなる．また，キャプションが画像の右側に続く形になるため改行として<br> を挿入している．

もちろん，表にキャプションを付与することも可能だが，<caption> タグは<table> タグ内で使用する必要がある．markdown で表を書く場合には全体を<table> タグに囲まれてしまうために上手く利用できない．
表に関してはmarkdown で書いた方が圧倒的に簡便なので，キャプションのためにわざわざHTML で書く必要はないだろう．

Get Image from Other Service

さまざまなサービスを利用すれば画像を得ることも出来る．

Placeholder .com

https://placeholder.com/

https://via.placeholder.com/<horizontal_length>x<vertical_length>.png/<text_color>/<background_color>?text=<text>

Shields .io

https://shields.io/

https://img.shields.io/badge/<name>-<ver>-<color>.svg

この他に，ボタンのスタイルやアイコンの付与などが可能になっている．

shields.ioを使って技術系アイコンを量産した - Qiita

Digression

HTML に詳しくないのでまだあるかもしれない．探していきたい．特に文字色を付加することがいまだ出来ていないため，これはクリアしたい．

Problem of Japanese language

フォントを変更する場合，日本語がうまく変更されない場合がある．これはブラウザなどの環境に依存しているようだ．

English: *Italic*<br>
日本語: *いたりっく* *イタリック* *斜体*

English: Italic
日本語: いたりっく イタリック 斜体

---

English: **Bold**<br>
日本語: **ぼーるど** **ボールド** **太字**

English: Bold
日本語: ぼーるど ボールド 太字

---

English: **_Bold and Italic_** <br>
日本語: **_ふとじしゃたい_** **_フトジシャタイ_** **_太字斜体_**

English: Bold and Italic
日本語: ふとじしゃたい フトジシャタイ 太字斜体

---

English: <samp>Sample</samp><br>
日本語: <samp>さんぷる</samp> <samp>サンプル</samp> <samp>試験</samp>

English: Sample
日本語: さんぷる サンプル 試験

---

English: <kbd>Keyboard</kbd><br>
日本語: <kbd>きーぼーど</kbd> <kbd>キーボード</kbd> <kbd>鍵盤</kbd>

English: Keyboard
日本語: きーぼーど キーボード 鍵盤