パソコンや自然科学っぽい話題：SSブログ

	ブログをはじめるログイン
2020年06月04日｜ 2020年06月05日｜2020年06月06日ブログトップ
マークダウンという便利なマークアップ　 [IT一般]

マークダウンでドキュメントを残すときはいつもMacDownを使っている。このヘルプファイルは、簡単でわかりやすいので、日本語に訳してた。画面に収まるように改行したのは、HTMLのpreタグで囲んだ（ソフト改行されない）から。MacTeXの関連の文書を訳したときには、preタグを使わなかった。だって、preタグのことは、今知ったんだもん。


# MacDown

![MacDown logo](http://macdown.uranusjr.com/static/images/logo-160.png)

こんにちは！ 私は**MacDown**です。macOS用のオープンソースのマークダウンエディタです。

自己紹介します。

## マークダウンと私

**MarcDown** は、John Gruberによって作成された、プレーンテキストを読みやすくて
書きやすくマークアップする構文規則です。
元のMarkdown構文の仕様は[ここ](http://daringfireball.net/projects/markdown/syntax)にあります。

**MacDown**は、Markdown文書のための使いやすいエディタとして作られました。
私MacDownは、あなたの書いたMarkdownコンテンツをリアルタイムでHTMLにレンダリングし、
プレビューパネルに表示します。

![MacDown Screenshot](http://d.pr/i/10UGP+)

私はオリジナルのMarkdown構文をすべてサポートしています。
しかし、私はもっと多くのことができます！ [**マークダウン**設定ペイン](#markdown-pane)から、
人気はあるけれど非標準の構文をオン/オフにできます。

[**レンダリング**設定ペイン](#rendering-pane)でHTMLレンダリングオプションを指定できます。

[**エディタ**設定ペイン](#editor-pane)でエディタウィンドウをカスタマイズできます。

[**一般**設定ペイン](#general-pane)で、にエディタ（私です！）の動作を設定できます。

## 基本
私が持っているすべての追加の構文と機能について説明する前に、標準マークダウンの基本を紹介します。
既にマークダウンを知っているユーザさんで、私ができることを知りたいのなら、
[**マークダウン**設定ペイン](#markdown-pane)を見てください。すぐに始めましょう。

### 改行
強制的に改行するには、行の終わりに2つのスペース（半角空白）を入れてリターンキーを押します。
（日本語では行末の改行が半角空白として表示されるようです。）

* ここでは2行に
わかれません

* ここでは2行に  
わかれます

ここはコードです。

```
* ここでは2行に
わかれません

* ここでは2行に  
わかれます
```

### 太字と強調

**太字**: `**Strong**` あるいは `__Strong__` (Command-B)  
*強調*: `*Emphasize*` あるいは `_Emphasize_`[^emphasize] (Command-I)

### 見出し（こんな感じ）

	見出し1
	========

	見出し2
	--------

あるいは

	# 見出し 1
	## 見出し 2
	### 見出し 3
	#### 見出し 4
	##### 見出し 5
	###### 見出し 6



### リンクとメール
#### 行中では
山かっこ（不等号で使われる大小記号< >）でメールアドレスを囲むだけで、
クリック可能になります：
``

URLついても同じようにします：
``

次のようなテキストをリンクさせたいことがあるでしょう。[Macdown Website](http://macdown.uranusjr.com "タイトル")
`[Macdown Website](http://macdown.uranusjr.com" タイトル ")`
（タイトルはオプションです）


#### 参照箇所の表し方
長いURLをインラインに含めると見苦しい場合や、すべてのURLをまとめたい
場合がありますね。

そのときは[リンク][arbitrary_id] `[a link][arbitrary_id]`のように作成し、
ファイル内の適当な任意の場所に独自の行を記しておきます。
`[arbitrary_id]:http://macdown.uranusjr.com"タイトル"`
  
リンクテキスト自体が適切な識別子idになる場合、[ここ][]`[ここ][]`のようにしてリンクできて、
ファイル内の他の任意の場所にある独自の行にリンクできます。
`[ここ]:http://macdown.uranusjr.com`

[arbitrary_id]: http://macdown.uranusjr.com "タイトル"
[ここ]: http://macdown.uranusjr.com   


### 画像
#### 行の中に配置
`![Alt Image Text](path/or/url/to.jpg "Optional Title")`
#### 参照のスタイル
`![Alt Image Text][image-id]`  
あるいは行のどこにでも配置できます：
`[image-id]: path/or/url/to.jpg "Optional Title"`


### リスト，箇条書き

* リストの前には空白行（またはブロック要素）が必要です
* 順序付けられていないリストは、各項目を`*`で開始します
- `-`も機能します
  * レベルをインデントしてネストされたリストを作成する
      1. 順序付きリストがサポートされています。
      2. `1. `のような見出し（半角数字-半角ピリオド-半角空白）で開始します。
      42. 使用する番号に影響されません。順番にレンダリングします
      1. したがって、各行を`1.`で開始し、ご自身で並べ替えてください。

これがコードです：

```
* リストの前には空白行（またはブロック要素）が必要です
* 順序付けられていないリストは、各項目を `*`で開始します
- `-`も機能します
   *レベルをインデントしてネストされたリストを作成する
     1. 順序付きリストがサポートされています。
     2. `1. `のような見出し（半角数字-半角ピリオド-半角空白）で開始します。
     42. 使用する番号に影響されません。順番にレンダリングします
     1.したがって、各行を`1.`で開始し、ご自身で並べ替えてください。
```



### ブロックでの引用

> 山括弧`>`はブロックでの引用に使用されます。
すべての行が`>`で始まる必要があるわけではありませんが、
段落間に空行はありません。
> ちょっと見にくいですね。
> > ブロック引用符はネストできます。
> > > 複数の階層
>
> ほとんどのマークダウン構文は、ブロック引用の中でも機能します。
>
> *リスト
> * [リンク][arbitrary_id]
> * など

これがコードです：
 
```
> 山括弧`>`はブロック引用に使用されます。
すべての行が`>`で始まる必要があるわけではありませんが、
段落間に空行はありません。
> ちょっと見にくいですね。
> > ブロック引用符はネストできます。
> > > 複数の階層
>
> ほとんどのマークダウン構文は、ブロック引用の中でも機能します。
>
> * リスト
> * [リンク][arbitrary_id]
> * など
```
 
  
### 行中（インライン）コード
`インラインコード`は、バッククォートで囲むことで示されます。
`` `インラインコード` ``

表示する必要がある ``コードにバッククォート` ``がある場合、二重バッククォートを使用できます：

``バッククォート`を使用したコード ``(バッククォートの最終のものの前のスペースに注意してください)


### ブロックコード
少なくとも4つのスペース（半角空白）またはタブを1つでインデントすると、
コードブロックが表示されます。

    print('これがコードブロックの例です')
    print('ブロックの前に空白行を付ける必要があります')
    print('そうして、少なくとも4つのスペースまたはタブを1つでインデント')
        print('ネストしてもむしされます。コードが文字通り表示されます。

私は、この他に[Fenced Code Blocks](＃fenced-code-block)と呼ばれる方法を知っています。
これについては後で説明します。

### 罫線について
1行に3つのアスタリスク`***`または3つのダッシュ`---`を入力すると、横罫線が表示されます。

***

## マークダウン設定ペイン
ここに私がマークダウンをHTMLに解析する方法に関連するすべての設定を持っています。
![Markdown preferences pane](http://d.pr/i/RQEi+)

### 文書の整形
***Smartypants***拡張機能は、コンテキストに応じて、テキスト内の直線引用符（`"`および`'`）を自動的に正しく開閉がペアになった引用符（`“`、`”`、`‘`、および`’`）に変換します。
あなたが私のような組版に凝っているのなら非常に便利です。
QuoteとSmartypantsは構文的に互換性がありません。
両方が有効な場合、Quoteが優先されます。


### ブロック単位の整形

#### 表

これが表（テーブル）です：

最初の見出し| 2番目の見出し
------------- | -------------
 中身を入れるセル | 中身を入れるセル
 中身を入れるセル | 中身を入れるセル

次のような構文でセルの内容を整列できます。

| 左揃え| 中央揃え| 右揃え|
|:------------- |:---------------:| -------------:|
| 列の3は| 冗長なテキスト| 1600ドル |
| 列の2は| 中央揃え | 12ドル |
| シマウマの縞 | 綺麗だね | 1ドル |

左端と右端のパイプ（`|`）は見た目だけで、省略できます。
スペース（半角空白）も関係ありません。
位置合わせは、コロン記号`:`マークのみに依存します。

#### フェンスコードブロック

これはフェンスで囲まれたコードブロックです。

```
print('Hello world!')
```

バックティック（`` ` ``）の代わりに波線（`~`）を使用することもできます：

~~~
print('Hello world!')
~~~


最初の行の最後にオプションでプログラミング言語の識別のためのIDを追加できます。
言語IDは、***コードブロックをシンタックスハイライト***オプションをオンにした場合にのみ、内部のコードを強調表示するために使用されます。これを有効にした結果が次の図です：

![Syntax highlighting example](http://d.pr/i/9HM6+)

私は多くの一般的なプログラミング言語だけでなく、サポートされていない言語の場合にも使用できるいくつかの一般的な構文をサポートしています。
サポートされている構文の完全なリストについては、[公式サイトの関連セクション](http://macdown.uranusjr.com/features/)を参照してください。


### 行の中の整形

以下は、サポートされているオプションのインラインマークアップのリストです。

オプション名    | マークアップ       | 有効な場合の結果
--------------------|------------------|-----------------------|
単語内強調     | あっと\*驚いた\*よ  | あっと驚いたよ |
取り消し線     | \~~ニャーニャー\~~  |ニャーニャー |
下線 [^under] | \_だからぁ\_        | だからぁ |
引用 [^quote] | \"こんななエディタ\"  | こんなエディタ |
ハイライト     | \ ==とても良いね\ == | とても良いね |
上付き        | ホゲ\^(フガァ)       | ホゲ^フガァ |
オートリンク   | http://t.co        |  |
脚注          | [\^4] および [\^4]: | [^4]および脚注4 |

[^4]: 脚注指示の部分に数字を使用する必要はありません。
`[^footy note4]`や`[^footy note4]:`のような任意のものも機能します。
ただし、番号付きの脚注として*レンダリング*されます。
また、脚注を順番に並べる必要はありません。
テキストの本文で参照されているのと同じ順序で表示されるように、順番が整理されます。
参照した場所の近くに脚注の中身を置いたり、ファイルの末尾に脚注の文書をまとめることもできます。




## レンダリング設定ペイン
ここは、私がプレビュー ウィンドウで解析されたマークダウンを
レンダリングおよびスタイル設定する方法に関する基本設定を持っている場所です。
![Rendering preferences pane](http://d.pr/i/rT4d+)

### CSS
あなたが作成するhtmlのレンダリングに別のcssファイルを選択できます。
独自のカスタムcssファイルを作成または追加することもできます。

### シンタックスのハイライト
フェンスで囲まれたコードブロックをシンタックスハイライトする方法は既に見ました。
まだの方は、[フェンスコードブロック](#fenced-code-block)セクションをご覧ください！ 
構文の強調表示用にさまざまなテーマを選択することもできます。

### TeXに似た数式作成
私はTeXのような数式もレンダリングできます。[^math] 次のように文中に数式を表示できます：
\\( 1 + 1 \\)あるいは、このように（MathMLなら）：  $1 + 1$ 、および別行立て数式もできます：

\\[
    A^T_S = B
\\]

あるいは（MathMLで）

 $A_{S}^{T} = B$ 



### 確認表
1. [x] チェックボックスリストの構文をレンダリングできます
   * [x] ネストをサポートしています
   * [x] 順序付き*および*順序なしリストをサポート
2. [ ] HTMLウィンドウでチェックボックスのクリックの動作はサポートしていません


### Jekyllフロントエンド
必要に応じて、私は素敵な表にJekyllフロントエンドを表示できます。
ファイルの最初に前置文を置き、 `---`で囲んでください。例えば：

```
---
title: "Macdown is my friend"
date: 2014-06-06 20:00:00
---
```

### 文字列で改行を指定する
通常、改行を作成するには、行末に2つのスペース（半角空白）と改行 (別名リターン) を入れなければなりません。
そうすれば、改行で行を終了するたびに実際の改行できます。
しかし、これを有効にすると、私がそれをレンダリングするときに素敵に見えるマークダウンは、
いくつかの*他の*プログラムがレンダリングするときに、かなり奇妙に見えるかもしれません。


## 環境設定の一般ペイン

ここに私はアプリケーションの動作に関連する基本設定を持っています。
![General preferences pane](http://d.pr/i/rvwu+)

[一般]ペインでは、私にどのように動作するかを指定できます。
たとえば、起動時に文書を開いて欲しいですか？ 
また、入力中にプレビューウィンドウを常に更新するかわりに、あなたが`command-R`を押すのを待つほうがいいですか。エディタウィンドウを右に置くのが好きな人もいるでしょうね。
または、入力中に単語数を知りたいですか。
また、開発途上の私に興味があるのか、あるいは必ず安全な公式リリースを使いたいのか伝える場所でもあります。

## 環境設定のエディタペイン
ここに私は編集ウィンドウの動作とスタイルに関する設定を持っています。
![Editor preferences pane](http://d.pr/i/6OL5+)


### スタイル

私のエディタは構文の強調表示を提供します。
基本フォントとカラー/サイズ変更、テーマを編集できます。
どこから始めればよいかわからない場合は、いくつかのデフォルトテーマ
（[Mou](http://mouapp.com)の作成者であるChen Luoさんの提供）をご用意しました。

必要に応じて、編集したり、新しいテーマを追加することもできます！ 
***変更***ボタンをクリックして、物事を動かし始めてください。
ただし、正しいファイル拡張子（`.styles`）を使用してください。
私はそれについて、私はうるさいです。

私は、編集作業を容易にするために、オートコンプリートやその他の機能を提供しています。
ただし、気に入らない場合はオフにすることができます。


## 隠れているプリフェレンス

プレビューの背後にあるHTMLを見ることができます。
そのためには、macOSのビルトインのWebKit開発ツールを、MacDownのターミナルウィンドウから有効にします。

```
defaults write com.uranusjr.macdown WebKitDeveloperExtras -bool true
```

次に、プレビューペイン内で右クリックでコンテキストメニューを表示させて
“Inspect Element”を選びます。

これは、Safariで解はツールを有効にしている場合に見るのと全く同じインスペクタです。

## 始めましょう

以上で終わりです。お付き合いをありがとう。
では，これでお別れです。（アプリについて更新があれば、お知らせします！）。

ハッピーライティング！


[^emphasize]: **下線**がオンになっている場合、
`_this notation_`は強調ではなく下線付きでレンダリングされます

[^under]: **下線**が無効になっている場合、`_this_`は
下線が引かれずに*強調*としてレンダリングされます。

[^quote]: **Quote**はリテラル`"`文字をhtml``タグに置き換えます。
**Quote**と**Smartypants**は構文的に互換性がありません。
両方が有効な場合、**Quote**が使われます。
**Quote**は、標準のMarkdownの一部である*blockquote*とは異なることに注意してください。

[^math]: インターネット接続が必要です。