📑
ZennでよくつかうMarkdown記法のSnippetを登録する
Snippetを登録する
ZennのBookや記事を見ていると、見たことないMarkdown表示があります。
使い方は分かったけど、入力するのが面倒くさい。
単語のショートカットをしたいので、Snippetを登録することにしました。
メッセージブロックを表示するMarkdown記法
:::message
メッセージをここに
:::
messageの入力をmzennを入力すれば、変換対象となるSnippetを登録します。
[ファイル]メニューからユーザースニペットを開きます。
ファイル > ユーザー設定 > ユーザースニペット
markdown.jsonを選択します。
markdownで検索 > markdown.json
markdown.json
{
"Markdown Zenn Message": {
"prefix": "mzenn",
"body": [
":::message",
"メッセージをここに" ,
":::"
],
"description": "Zenn Original : Messge Block"
}
}
prefixに設定したmzennを入力し、Ctrl + Spaceを入力すると、Snippetに登録したbodyとdescriptionが表示されます。
リストからmzennを選択すると、Messageブロックが入力されます。
他のZennオリジナル記法やよく使う記法を追加する。
登録したPrefixとmarkdown.json
Zennオリジナル記法以外にもよく使う記法を登録しました。
| Prefix | 概要 |
|---|---|
| mzenn | ZennのオリジナルMarkdown記法 |
| mmath | 数式 |
| mimage | 画像挿入のMarkdown（UnrealEngineだとよく使う） |
markdown.json
{
// Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Markdown Zenn Message": {
"prefix": "mzenn",
"body": [
":::message",
"メッセージをここに" ,
":::"
],
"description": "Zenn Original : Messge Block"
},
"Markdown Zenn Message Alert": {
"prefix": "mzenn",
"body": [
":::message alert",
"警告メッセージをここに" ,
":::"
],
"description": "Zenn Original : Messge Alert Block"
},
"Markdown Zenn Toggle": {
"prefix": "mzenn",
"body": [
":::details タイトル",
"表示したい内容" ,
":::"
],
"description": "Zenn Original : Toggle"
},
"Markdown Code cpp": {
"prefix": "mcode",
"body": [
"```cpp:.cpp",
"" ,
"```"
],
"description": "code block : .cpp"
},
"Markdown Code header": {
"prefix": "mcode",
"body": [
"```h:.h",
"" ,
"```"
],
"description": "code block : .h"
},
"Markdown Zenn Math": {
"prefix": "mmath",
"body": [
"$$",
"A + B" ,
"$$"
],
"description": "Zenn Original : Math"
},
"Markdown Image Basic": {
"prefix": "mimage",
"body": [
"",
],
"description": "Image Basick"
},
"Markdown Image width": {
"prefix": "mimage",
"body": [
"",
],
"description": "Image Width"
},
"Markdown Image caption": {
"prefix": "mimage",
"body": [
"",
"*caption*",
],
"description": "Image with caption"
}
}
Zenn独自（mzenn）
prefixの文字列は重複するとリスト化します。
警告ありのメッセージ
折りたたむことができるアコーディオン
タイトル
表示したい内容
ソースコード（mcode）
ソースコードもよく使うので、C++の[.Cpp]と[.h]を追加しました。
.cpp
int A = 10;
よく使用する言語があるか確認して追加します。
📄 対応言語の一覧 →
数式（mmath）
数式を表示できるMarkdown記法
Zenn ではKaTeXによる数式表示に対応しています。
KaTeXのバージョンは常に最新バージョンを使用します。
画像挿入
Unreal Engineだとスクリーンショットをよく使うのでimage挿入のsnippetです。
| Type | Markdown |
|---|---|
| 通常 |  |
| 幅指定 |  |
| キャプションあり |  *caption* |
参照URL
Discussion