Vuepressで使えるMarkdown記法一覧

10665 ワード
vuepress Vue.js Markdown Markdown テキストリンク

はじめに

VuepressでMarkdown記法を使って記事を書いているので、使っていない記法とかないかなと思って一覧を調べてきました。主にQiitaの記事でチートシートを作ってくださっている方は多いのですが、vuepressではどないやろ、ということで備忘録もかねてMarkdown記法一覧を作っていきます。

ちなみにいくつかqiitaだからこそ表示されない部分もあったりしたので、Vuepressでのコードと実装を見たい方は本サイトをご確認ください。
【現環境 Vuepressのテーマ使ってブログやってます。基本Markdownで記事を書くことになりますので、違うテーマの方でもVuepressを使っていれば参考になるはずです】

本文のレイアウト

▼見出し

例）

# h1
## h2
### h3
### h4

実際

h1

h2

h3

h4

▼行間を開ける

例）

<br>
<br>

実際




▼引用

例）

>ここに引用する文章を書きます
>>入れ子にするならこうします

実際

ここに引用する文章を書きます

入子にするならこうします




※チェックボックスはvuepressでは使えないようです。

▼リスト

例）

- リスト１
* リスト２
+ リスト３

1. 順序つきリスト１
2. 順序つきリスト２

実際

  • リスト１
  • リスト２
  • リスト３
  1. 順序つきリスト１
  2. 順序つきリスト２

▼水平線

例）ハイフンかアスタリスク三個以上

***
* * *
******
---
- - -
------

実際




▼強調

例）

*イタリック体*

**Bold体**

***イタリック&ボールド体***

_イタリック体_

__Bold体__

___イタリック&ボールド体___

実際

イタリック体

Bold体

イタリック&ボールド体

イタリック体

Bold体

イタリック&ボールド体

▼打ち消し

例）

~~打ち消し~~

実際

打ち消し

ちなみに、注釈はvuepressでは使えないようです。plugin使ったらわかりませんが。

リンク

▼自動リンク

例）

<https://sirenji-suiren.netlify.app>

実際

▼インライン記法

例）

[リンクのタイトル](https://sirenji-suiren.netlify.app)

実際

リンクのタイトル

▼画像

例）.vuepressディレクトリの中のpublicファイルが参照できるディレクトリです。

![画像のタイトル](/avatar.png)

実際


※当然ここでは表示されません。

codeの記載

▼codeのインライン表記

例）

```print("Hello")```というふうに一行で

実際

※qiitaではうまく表示されないため削除しました。
実際の実装は本サイトでご確認ください。

▼シンプルなcodeの記載

例）うまくコードを表示できないので苦肉の策です。

`を三つ続けて打つ
print("やっほー")
`を三つ続けて打つ

print("やっほー")

▼シンタックスハイライトを使う場合

例）

`を三つ続けて打つPython
print("やっほー")
`を三つ続けて打つ

実際

print("やっほー")

Bash, C#(cs), C++(cpp), CSS, Diff, HTML, XML, Ini, Java, Javascript, PHP, Perl, Python, Ruby, SQL, 1C, AVR Assembler(avrasm), Apache, Axapta, CMake, DOS .bat(dos), Delphi, Django, Erlang, Erlang, REPL, Go, Haskell, Lisp, Lua, MEL, Nginx, Objective C(objectivec), Parser3, Python, profile, Scala, Smalltalk, TeX, VBScript, VHDL, Vala
は上のコードのPythonに当たる部分をこの通りに記載すればシンタックスになります。

▼テーブル記法

例）

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

実際

Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

▼Twitter埋め込み

例）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とうとう主人公の過去が明らかに？　総アクセス数20万PVまであと600！　プログラマーでもなかった当時からプログラマーになった今見ると超恥ずかしい作品。<a href="https://t.co/B4X8ThjYZV">https://t.co/B4X8ThjYZV</a><br>「magi code 〜異世界プログラマーの魔法改革〜」更新しました！<a href="https://twitter.com/hashtag/narou?src=hash&amp;ref_src=twsrc%5Etfw">#narou</a> <a href="https://twitter.com/hashtag/narouN5828DO?src=hash&amp;ref_src=twsrc%5Etfw">#narouN5828DO</a> <a href="https://t.co/8okIP6hCvj">pic.twitter.com/8okIP6hCvj</a></p>&mdash; 西蓮寺 睡蓮 (@sirenji_suiren) <a href="https://twitter.com/sirenji_suiren/status/1358015852444938241?ref_src=twsrc%5Etfw">February 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際

ここもqiitaではうまく表示されませんでした。本サイトでは埋め込めてます・・・

※Asciinema埋め込みは無理でした。

▼CodePen埋め込み

例）

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="sirenji_suiren" data-slug-hash="WNoxYPv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="pienpien">
  <span>See the Pen <a href="https://codepen.io/sirenji_suiren/pen/WNoxYPv">
  pienpien</a> by 西蓮寺 睡蓮 (<a href="https://codepen.io/sirenji_suiren">@sirenji_suiren</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

実際

ここもqiitaではうまく表示されませんでした。本サイトでは埋め込めてます・・・

最後に

以上、Vuepressで使えるMarkdown一覧でした。参考リンクのほう載せておくので、Qiitaで記事を書く方にとってはそのほうが有益なtipsかもしれませんのでご参考ください。

そのうちにこのブログを立ち上げた技術についても記事書こうと思っています。

繰り返しになりますが、実際のVuepressでの実装が見たい方はぜひ本サイトをご覧ください。

参考リンク

Wikipedia

Markdown記法チートシート

Markdown記法一覧

Markdown記法について