ウェブサイト検索

Linux で GitHub フレーバーのマークダウンを使用する方法


マークダウンは、Web 用に作成された書式設定言語です。マークダウンの目的は、インターネット上で文章を書くときに作業を楽にすることです。時間の経過とともに、さまざまな種類のマークダウンが作成されます。ただし、この記事では主に Github Flavored Markdown (GFM) に焦点を当てます。

GithubCommonMark に基づいています。 GFM では、テーブル、コード フェンシングなど、多くの追加機能がサポートされています。早速、GFM の構文と、さまざまなケースでの使用方法を調べてみましょう。

これをデモンストレーションするために VScode を使用していますが、適切な Linux エディターを選択できます。 Atom や Vscode などの一部のエディターにはマークダウン サポートが付属しており、一部のエディターではマークダウン プラグインをインストールする必要があります。

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

Markdown エディターに見出しを追加する方法

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

: H1H2 にはデフォルトで下線スタイルが設定されています。

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

場合によっては、見出しを中心に向けて揃えたい場合があります。しかし、悲しいことに、Markdown ではアライメントがデフォルトでサポートされていません。デフォルトでは、見出しは左揃えで表示されます。マークダウン内に 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>

Markdown エディターにコメントを追加する方法

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

<!--
Comment block
-->

テキストを単一行としてレンダリングする方法

通常、何かを別々の行に次々と入力すると、マークダウンはそれを単一行としてレンダリングします。

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

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

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

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

水平線を追加する方法

横罫線は、3 つ以上のアスタリスク (*)ハイフン (-)、またはアンダースコア (_) を配置することで作成できます。一行で。間にスペースを入れてもOKです。

* * *
---
___

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

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

**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 を使用します。以下の例は、インライン コードを作成する方法を示しています。インライン コードとして表示された Word のメモと 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)
```

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

マークダウンでは、項目を順序付きリストと順序なしリストに整理できます。順序付きリストを作成するには、数字の後にピリオドを追加します。ここで注目すべき興味深い点は、番号は連続している必要はないということです。 Markdown エンジンは、非順次の順序付けを行った場合でも、それが順序付きリストであることを理解できるほど賢いです。

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

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

タスクリストの作成

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

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

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

[Tecmint](https://linux-console.net "The best site for Linux")

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

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

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

山括弧 < > 内にリンクを配置してリンクを作成することもできます。

画像へのリンクの追加

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

![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 を使用している場合は、「Markdown Table Prettifier」を使用してテーブルをきれいにフォーマットできます。

絵文字を作成する

GFM は幅広い絵文字をサポートしています。絵文字のチートシートを見てください。

この記事はここまでです。フィードバックがある場合は、コメント欄に投稿してください。