Markdownとは?どこで使えるのか?【4つのサービスを実際に確認】

Markdown

Markdownとは何なのかということと、どこで使えるのかをまとめてみました。
どこで使えるのかの確認では、実際に書いてみて内容をスクショしてみました。

PR

Markdown(マークダウン)とは?

Wikipediaを確認すると、下記のように記載されています。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
しかし、現在ではHTMLのほかパワーポイント形式やLaTeX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。
各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
引用:Wikipedia

基本的には、テキスト(Markdown)で書いた内容をHTMLに変換して見やすくしてくれるマークアップ言語です。
書いた内容をタグを書かずにHTML形式としてあつかってくれます。

例えば、HTMLでh1タグの見出しは下記のように書きますが

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

Markdown形式で書く場合は、下記のように#を使うだけで書くことができます。

# 見出し1
## 見出し2
### 見出し3

覚えるとHTMLタグを書くより簡単に、早く文章を作成することができます。
用途としては、情報共有をするための記事を書くときにMarkdownで記載すると、効率よく記事を作成することができます。

PR

どこで使えるのか?

実際にそれぞれのサービスで書いてみて、どんな感じで表示されるかスクショを載せています。

ここで上げているもの以外にもMarkdownを使うサービスは色々あるかと思います。
エンジニアの方は学習コストも低いので、ぜひ覚えていきましょう。

Qiita

Qiitaで記事を書くときにはMarkdownで書いていきます。
こんな感じで書いたものが、即時プレビューされるので良いですね。

QiitaでMarkdownの表示確認1
QiitaでMarkdownの表示確認2

Github

README.mdなど、「.md」ファイルを記載するときに使います。
「.md」はマークダウンファイルの拡張子です。

今回は実際に下記のように書いて、README.mdとして保存しました。

# Test
## 見出し2
- list1
  - list1-1
  - list1-2

### 見出し3

> 引用テスト1
> テストテストテスト

[codelikes.comリンク](https://codelikes.com)

### 見出し3

![image](https://codelikes.com/wp-content/uploads/2020/09/74493ea5affdeb4a2c1353c5f0e69886.jpeg)

README.mdをProjectのトップに書いておくと、リポジトリにアクセスしたときに表示してくれます。
Githubにアップすると、このようになります。

GithubでMarkdownの表示確認

VSCode

VSCodeはサービスではなく、エディターですが取り上げてみました。
「.md」でファイルを作ると、マークダウンとして認識されて書くことができます。

実際に下記のように書いて

VSCodeでMarkdownの記載

プレビューボタンを押すと、エディターですぐに確認できます。

VSCodeでMarkdownの表示確認

WordPress

実はWordpressの記事もMarkdownで書くことが可能です。
Wordpressの記事をMarkdownで書くには設定が必要になります。
設定については、また別の記事で書きたいと思います。

実際に下記のように書いて

WordpressでMarkdownの記載

WordPressのプレビューボタンを押すと、見出しなどがしっかり認識されて記事化されました。

WordpressでMarkdownの表示確認

Slackはマークダウンを使える?

Slackはマークダウンを書くことが不可能ですが、それっぽい感じでメッセージを作成することが可能です。

例えば最初に扱った見出しなどは使うことができません。
チャットツールなので、全てサポートする必要はないと言われると、「確かに。」と言った感じですね。

おわりに

Markdownについてと、実際にどこで書けるかを見ていきました。

実際に書いてみるとHTMLでタグを書くよりも、早く、見やすく書けることが体感できるかと思います。
まだ、書いてみたことがない方は是非使ってみてください。

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました