LinuxでGitHubフレーバーマークダウンを操作する方法


Markdownは、Web用に作成されたフォーマット言語です。マークダウンの目的は、インターネットで書いているときに生活を楽にすることです。時間の経過とともに、Github Flavoured Markdown(GFM)があります。

GithubはCommonMarkに基づいています。テーブルやコードフェンシングなど、GFMでサポートされている追加機能はたくさんあります。さあ、GFMの構文と、さまざまなケースでの使用方法を見てみましょう。

私はAtomを使用しており、Vscodeにはマークダウンサポートが付属しています。一部のエディターでは、マークダウンプラグインをインストールする必要があります。

マークダウンを使用するには、ファイルを拡張子として .mdまたは.markdownを付けて保存する必要があります。

マークダウンエディタに見出しを追加する方法

マークダウンでサポートされている見出しには6つのレベルがあります。見出しを作成するには、ハッシュ(#)記号に続けて、スペースと見出しの名前を使用します。ハッシュ値が高いほど、見出しのサイズは小さくなります。

注:H1とH2には、デフォルトで下線スタイルがあります。

# Heading1
## Heading2
### Heading3
#### Heading4
##### Heading5
###### Heading 6

見出しを中央に揃えたい場合があります。しかし、悲しい話は、マークダウンではデフォルトでアライメントがサポートされていないことです。デフォルトでは、見出しは左揃えでレンダリングされます。マークダウン内にHTML/CSSタグを埋め込んで、位置合わせを行うことができます。

<h1 style="text-align:center">MARKDOWN</h1>
<h1 style="text-align:left">MARKDOWN</h1>
<h1 style="text-align:right">MARKDOWN</h1>
<h1 style="text-align:justify">MARKDOWN</h1>

MarkdownEditorにコメントを追加する方法

コメントは、コード/ドキュメントをよりよく理解するために特定のものを文書化する方法です。これは、マークダウンエンジンではレンダリングされません。

<!--
Comment block
-->

テキストを1行でレンダリングする方法

通常、別の行に次々と何かを入力すると、マークダウンによって1行としてレンダリングされます。

改行は2つの方法で作成できます。

  • ソフト改行
  • ハードラインブレイク

ソフト改行は、行の終わりに2つのスペースを追加することで作成できます。このように、マークダウンは各行を別々の行にレンダリングします。

ハードラインブレークは、各行の間に空の行を挿入することで作成できます。

水平線を追加する方法

水平方向のルールは、1行に3つ以上のアスタリスク(*)、ハイフン(-)、またはアンダースコア(_)を配置することで作成できます。それらの間にスペースを追加することもできます。

* * *
---
___

テキストを太字にする方法

単語または行を太字にするには、単語または行を二重アスタリスク(**)または二重下線(__)で囲みます。

**Making this sentence bold using double asterisks.**

__Making this sentence bold using double underscore.__

テキストイタリックの作り方

単語または行をイタリックにするには、単語または行を単一のアスタリスク(*)または単一の下線(_)で囲みます。

*Making this line to be italicized using asterisks.*

_Making this line to be italicized using underscore._

線に取り消し線を追加する方法

何かを打つには、ダブルチルダを使用する必要があります。二重チルダ(~~)の間で取り消し線を引く必要があるものをすべて囲みます。

I am just striking the word ~~Howdy~~.

~~I am striking off the entire line.~~

ブロッククォートを追加する方法

ブロック引用には、大なり記号(>)を使用します。

> Single line blockquote.

以下のブロック引用符がどのようにレンダリングされるかを確認してください。両方の線が同じ線でレンダリングされます。

> first line
> Second line
> Third line
> Fourth line

各行の終わりに2つのスペースを残すことにより、行の戻りを使用できます。このように、各行は1行にレンダリングされません。

記号よりも大きい接頭辞が付いた代替行を空のままにします。このようにして、同じブロック内の各行の間に改行を作成できます。

> first line
> 
> Second line
> 
> Third line
> 
> Fourth line 

大なり記号(>>)を2つ追加して、ネストされたブロック引用符を作成することもできます。

インラインコードを作成する

BACKTICKを使用してインラインコードを作成します。以下の例は、インラインコードを作成する方法を示しています。インラインコードとしてレンダリングされた単語notesとreadmeを見てください。

Markdown is one of the best tools for taking `notes` and creating `readme` files.

コードブロック構文の強調表示を追加

タブまたは4つのスペースを追加し、コードを配置してコードブロックとしてレンダリングします。または、コードを3つのバッククォートの間に配置して、ブロックをコードブロックとしてレンダリングします。ここで注意すべき重要な機能は、構文の強調表示です。通常、ブロック内にコードを配置する場合、配色は適用されません。

```
echo "Hello world"
```

同じ例を見てください。配色が自動的に適用されます。これは、コードに配色を適用する3つのバッククォートの後にプログラミング言語名を追加することで可能になります。

```bash
echo "Hello world"
```

サンプルのPythonコード。

```python
def fp():
  print("Hello World!!!")
fp()
```

サンプルSQLクエリ。

```sql
SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE   
WHERE SALARY_EMP<(SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE)
```

順序付きリストと順序なしリストを作成する

アイテムは、マークダウンで順序付きリストと順序なしリストに整理できます。順序付きリストを作成するには、数字の後にピリオドを追加します。ここで注意すべき興味深い部分は、番号が連続している必要がないことです。マークダウンエンジンは、非シーケンシャルな順序付けを行ったとしても、それが順序付けられたリストであることを理解するのに十分賢いです。

以下の例では、非順次順序(10、15、150)で順序付きリストを作成したことがわかりますが、マークダウンエンジンはそれを適切な順序でレンダリングします。画像に示すように、ネストされたリストを作成することもできます。

順序付けられていないリストを作成するには、プラス記号(+)アスタリスク(*)またはダッシュ(-)の後にスペースとリストのコンテンツを使用します。順序付きリストと同様に、ここでもネストされたリストを作成できます。

タスクリストの作成

これはGFMの特別な機能です。次の画像に示すように、タスクリストを作成できます。タスクを完了としてマークするには、画像に示すように、中括弧の間に‘x’を追加する必要があります。

テキストへのリンクを追加

リンクを追加するには、次の構文に従います。

[Tecmint](https://tecmint.com "The best site for Linux")

構文を3つの部分に分けてみましょう。

  • 表示されるテキスト–これは角括弧([Tecmint])内に配置されるテキストです。
  • リンク–実際のリンクを括弧内に配置します。
  • タイトル–テキストの上にマウスを置くと、リンクのツールチップが表示されます。画像に示すように、タイトルは引用符で囲む必要があります。

下の画像から、「Tecmint」が表示テキストであることがわかります。クリックすると、「Tecmint.com」にリダイレクトされます。

リンクを山かっこ<>の中に配置して作成することもできます。

画像へのリンクを追加

画像の構文は、リンクの追加に似ています。画像を追加するには、次の構文に従います。

![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")

構文を3つの部分に分けてみましょう。

  • 代替テキスト–代替テキストは角かっこ(![alt-text])の間に配置されます。画像が壊れているかロードできない場合、このテキストは壊れた記号とともに表示されます。
  • リンク–角かっこ内に、画像への実際のリンクを配置します。
  • タイトル–画像の上にマウスを置くと、画像の名前が表示されます。画像に示すように、タイトルは引用符で囲む必要があります。

画像とのリンクを作成することもできます。ユーザーが画像をクリックすると、外部リンクにリダイレクトされます。構文は、いくつかの変更を加えても同じです。角かっこ内に画像を挿入した後、括弧内にリンクを挿入するために使用したのと同じ構文を囲みます。

[![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")](https://en.wikipedia.org/wiki/Markdown)

テーブルを作成する

テーブルは、マークダウンの元のフレーバーではサポートされていません。これは、GFMに付属する特別な機能の1つです。テーブルを段階的に作成する方法を見てみましょう。

最初の部分は、列名を作成することです。列名は、パイプ(|)で区切ることで作成できます。

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |

2行目では、ダッシュ(-)をコロン(:)と組み合わせて使用します。ダッシュは、これがテーブルとしてレンダリングされることをマークダウンエンジンに通知し、コロンは、テキストを中央揃え、左揃え、または右揃えにするかどうかを決定します。

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|

:---:  ⇒ Center alignment
:---   ⇒ Left alignment
---:   ⇒ Right alignment

3行目から、レコードの作成を開始できます。レコードはパイプ(|)で区切る必要があります。

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|
|  Ravi         |   30         |  127        |
|  karthick     |   27         |  128        |

上の画像から、テーブルが正しくレンダリングされていることがわかります。列1は中央揃え、列2と3は左右揃えです。 Vscodeを使用している場合は、「MarkdownTablePrettifier」を使用してテーブルを適切にフォーマットできます。

絵文字を作成する

GFMは、さまざまな絵文字をサポートしています。絵文字のチートシートをご覧ください。

この記事は以上です。フィードバックがあれば、コメントセクションに投稿してください。