編集ガイド 🤓
ポイント
- Migdal への書き込みは Markdown 記法で整形します。
- 多くの場合、本文の行中に直接 HTML を挟むことができます。
- Liquid タグを使ってツイートや動画などの高度なコンテンツを埋め込むことができます。
- 意見をもらうためなどに、非公開記事も特定の URL からアクセス可能です。
- 見出し画像のサイズは 1000 × 420 がおすすめです。
✍ Markdown 入門
ここではよく使われる Markdown 構文の用例を示しています。もっと深く知りたい方は こちらのチートシート(英語)をご覧ください。
太字・斜体
斜体: *半角アスタリスク* か _半角アンダーバー_
太字: **半角アスタリスク2つ** か __半角アンダーバー2つ__
リンク
これはリンクです: [これはリンクです](リンク先-url)
ページ内アンカー(目次など用)
## 目次 * [第 1 章](#chapter-1) * [第 2 章](#chapter-2) ### 第 1 章 <a name="chapter-1"></a>
Inline Images
記事やコメントに GIF を貼り付ける場合、1 ページ 1 コマあたり 2 億画素までの制限があります。


figcaption
タグでキャプションもつけられます!見出し
以下の構文で記事に見出しをつけられます。
# '#' 1 個で レベル 1 見出し
## '#' 2 個で レベル 2 見出し
...
###### '#' 6 個で レベル 6 見出し
自分用のメモ・注記
以下の構文で非表示のメモを挿入することができます。
<!-- この内容は記事に現れません! -->
Accessibility
People access online content in all kinds of different ways, and there are a few things you can do to make your posts more easily understood by a broad range of users. You can find out more about web accessibility at W3C's Introduction to Web Accessibility, but there are two main ways you can make your posts more accessible: providing alternative descriptions of any images you use, and adding appropriate headings.
Providing alternative descriptions for images
Some users might not be able to see or easily process images that you use in your posts. Providing an alternative description for an image helps make sure that everyone can understand your post, whether they can see the image or not.
When you upload an image in the editor, you will see the following text to copy and paste into your post:

Replace the "Image description" in square brackets with a description of your image - for example:

By doing this, if someone reads your post using an assistive device like a screen reader (which turns written content into spoken audio) they will hear the description you entered.
Providing headings
Headings provide an outline of your post to readers, including people who can't see the screen well. Many assistive technologies (like screen readers) allow users to skip directly to a particular heading, helping them find and understand the content of your post with ease.
Headings can be added in levels 1 - 6. Avoid using a level one heading (i.e., '# Heading text'). When you create a post, your post title automatically becomes a level one heading and serves a special role on the page, much like the headline of a newspaper article. Similar to how a newspaper article only has one headline, it can be confusing if multiple level one headings exist on a page.
In your post content, start with level two headings for each section (e.g. '## Section heading text'), and increase the heading level by one when you'd like to add a sub-section, for example:
## Fun facts about sloths### SpeedSloths move at a maximum speed of 0.27 km/h!
🌊 Liquid タグ
エディタでは標準の Liquid タグが使えるほか、このサイト独自の拡張タグがあります。
Migdal 記事の埋め込み
記事の URL をそのまま入れるだけです。
{% link https://migdal.jp/kazz/boost-your-productivity-using-markdown-1be %}
ページのスラグを使ってもできます。
{% link kazz/boost-your-productivity-using-markdown-1be %}
link
の別名として post
も使えます。
{% post https://migdal.jp/kazz/boost-your-productivity-using-markdown-1be %}
あるいは、
{% post kazz/boost-your-productivity-using-markdown-1be %}
Migdal ユーザーの埋め込み
Migdal のユーザー名を入れるだけです。
{% user jess %}
Migdal タグの埋め込み
タグ名を入れるだけです。
{% tag git %}
Migdal コメントの埋め込み
コメントの URL 末尾の
ID
を入れるだけです。コメントの URL を取得するには、投稿時間の部分をクリックするか、右上角のメニューから「リンクをコピー」をクリックします。使い方は以下の通りです。
{% comment 2d1a %}
Migdal ポッドキャスト配信の埋め込み
ポッドキャストの配信回の URL をそのまま入れるだけです。
{% podcast https://migdal.jp/basecspodcast/s2e2--queues-irl %}
Migdal 告知の埋め込み
告知の URL をそのまま入れるだけです。
{% listing https://migdal.jp/listings/collabs/dev-is-open-source-823 %}
カテゴリとスラグを使ってもできます。
{% listing collabs/dev-is-open-source-823 %}
注意: 期限が切れた告知はエラーになります。公開中か最近延長したことを確かめてください。
詳細要素の埋め込み
details
, spoiler
, collapsible
を使って、HTML の詳細折りたたみ要素を入れることができます。「要約」の部分はドロップダウンのタイトルに表示され、「内容」はドロップダウンを開くまで見えない部分です。これはユーザーの働きかけ(クリックなど)がないと表示されない隠し文章(クイズの答えなど)を作るのに便利です。
{% details 要約 %} 内容 {% enddetails %} {% spoiler 要約 %} 内容 {% endspoiler %} {% collapsible 要約 %} 内容 {% endcollapsible %}
Twitter の埋め込み
Twitter の Liquid タグを使うと、サーバー側でツイートを整形し、読者にわかりやすく表示できます。URL 中のツイート
id
を入れるだけです。
{% twitter 834439977220112384 %}
Twitter Timeline
Using the Twitter Timeline Liquid tag will allow the Twitter Timeline to pre-render from the server. All you need is the Twitter Timeline
link
.
{% twitter_timeline https://twitter.com/username/timelines/834439977220112384 %}
Glitch 埋め込み
Glitch プロジェクトのスラグを入れるだけです。
{% glitch earthy-course %}
タグで使えるいくつかの optional attributes があります。ID の後ろに半角スペースに続けて追加できます。
- app
-
Shows the app preview without the code.
{% glitch earthy-course app %}
- code
-
Shows the code without the app preview.
{% glitch earthy-course code %}
- preview-first
-
Swap panes: Show the app preview on the left and the code on the right.
{% glitch earthy-course preview-first %}
- no-attribution
-
Hides the avatar of the creator(s).
{% glitch earthy-course no-attribution %}
- no-files
-
Hides the file browser.
{% glitch earthy-course no-files %}
- file
-
Lets you choose which file to display in the code panel. Defaults to index.html.
{% glitch earthy-course file=script.js %}
GitHub リポジトリの埋め込み
GitHub ユーザー名とリポジトリ名が必要です。
{% github forem/forem %}
- no-readme
-
GitHub タグに
no-readme
オプションを加えると、プレビューに readme ファイルを表示しません。{% github forem/forem no-readme %}
GitHub イシュー、プルリクエスト、コメントの埋め込み
GitHub イシュー、プルリク、コメントの URL を入れるだけです。
{% github https://github.com/forem/forem/issues/9 %}
GitHub Gist の埋め込み
Gist の URL を入れるだけです。
{% gist https://gist.github.com/CristinaSolana/1885435 %}
- 特定のファイルの埋め込み
-
特定の gist ファイル 1 件だけを埋め込むことができます。
{% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}
- 特定のバージョンの埋め込み
-
Gist ファイルの特定のバージョンだけを埋め込むことができます。リンクとそのバージョンのコミットハッシュだけが必要です。
{% gist [gist-link]/[commit-hash] %}
の形式で入れてください。{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}
- 特定のバージョンのファイルの埋め込み
-
特定の gist ファイルの特定のバージョンだけを埋め込むことができます。ファイル名とリンクとバージョンのコミットハッシュだけが必要です。
{% gist [gist-link]/[commit-hash] file=[filename] %}
の形式で入れてください。{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %}
GitPitch の埋め込み
GitPitch の URL を入れるだけです。
{% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %}
動画の埋め込み
URL 中の id
を入れるだけです。
- YouTube:
{% youtube dQw4w9WgXcQ %}
- Vimeo:
{% vimeo 193110695 %}
- Twitch:
{% twitch ClumsyPrettiestOilLitFam %}
Medium の埋め込み
埋め込みたい Medium 記事の URL をそのまま入れるだけです。
{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %}
SlideShare の埋め込み
SlideShare の key
を入れるだけです。
{% slideshare rdOzN9kr1yK5eE %}
CodePen の埋め込み
次のような pen ID code で終わる CodePen link
をそのまま入れるだけです。
{% codepen https://codepen.io/twhite96/pen/XKqrJX %}
- default-tab
-
default-tab
パラメータを CodePen 埋め込みタグに設定します。デフォルトは result です。{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}
- preview
-
Change the codepen URL path from /pen/ to /pen/preview/ (or to /embed/preview/) to use codepen's Click-to-Load preview embed feature in the resulting iframe.
{% codepen https://codepen.io/propjockey/pen/preview/dyVMgBg %}
- height
-
Add height parameter to your CodePen embed tag and to the resulting iframe itself. Defaults to 600
{% codepen https://codepen.io/propjockey/pen/dyVMgBg height=300 %}
- theme-id
-
Add theme-id parameter to your CodePen embed tag. The pen and theme-id must be from a codepen pro user to have an effect.
{% codepen https://codepen.io/propjockey/pen/dyVMgBg theme-id=40148 %}
- editable=true
-
Add editable=true parameter to your CodePen embed tag. Editable Embeds require more resources than non-editable Embeds. The pen must be from a codepen pro user to have an effect.
{% codepen https://codepen.io/propjockey/pen/dyVMgBg editable=true %}
- multiple-params
-
Add multiple parameters to your CodePen embed tag.
{% codepen https://codepen.io/propjockey/pen/dyVMgBg height=300 default-tab=css,result editable=true %}
Kotlin Playground
実行可能な Kotlin スニペットを作るには、https://play.kotlinlang.org で Kotlin Snippet を作成してください。
Share
ダイアログを開き、Medium
タブから完全な link
をコピーし、次のように使います。
{% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %}
RunKit の埋め込み
実行可能なコードを以下のように runkit liquid ブロックに入れます。
{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}
KaTeX の埋め込み
数式を以下のように KaTeX liquid ブロックに入れます。
{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
KaTeX を行の途中に入れるには "inline" オプションを使います。
{% katex inline %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
Stackblitz の埋め込み
Stackblitz の ID を入れるだけです。
{% stackblitz ball-demo %}
- デフォルトビュー
-
デフォルトビューを変更することができます。オプションは both, preview, editorで、デフォルトは both です。
{% stackblitz ball-demo view=preview %}
- デフォルトファイル
-
埋め込みタグがデフォルトで指すファイルを変更することができます。
{% stackblitz ball-demo file=style.css %}
CodeSandbox の埋め込み
Sandbox の ID
を入れるだけです。
{% codesandbox ppxnl191zx %}
Of CodeSandbox's many optional attributes, the following are supported by using them in your tag, just add them after the id, separated by spaces:
- initialpath
-
Which url to initially load in address bar.
{% codesandbox ppxnl191zx initialpath=/initial/load/path %}
- module
-
Which module to open by default.
{% codesandbox ppxnl191zx module=/path/to/module %}
- runonclick
-
Delays when code is ran if
1
{% codesandbox ppxnl191zx runonclick=1 %}
JSFiddle の埋め込み
以下のような fiddle ID code で終わる JSFiddle link
をそのまま入れるだけです。
{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}
- Custom tabs
-
You can add a custom tab order to you JSFiddle embed tag. Defaults to js,html,css,result.
{% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}
JSitor Liquid タグ
JSitor liquid タグを使うには完全な JSitor link
を入れます(パラメータの有無は自由)。
{% jsitor https://jsitor.com/embed/B7FQ5tHbY %}
{% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %}
Other options to use JSitor liquid tag is just by its ID
, you can add it with or without the parameters:
{% jsitor B7FQ5tHbY %}
{% jsitor B7FQ5tHbY?html&js&css&result&light %}
replit の埋め込み
ドメイン名の後の URL を入れるだけです。
{% replit @WigWog/PositiveFineOpensource %}
Stackery の埋め込み
Visualize your AWS Serverless Application Model templates with Stackery's visualizer embed
All you need is the repository owner, repository name, and branch that you would like visualized
{% stackery deeheber lambda-layer-example master %}
The repository must be a public GitHub repository and have a valid AWS SAM template in the project root titled template.yaml
Next Tech の埋め込み
サンドボックスの share URL を入れるだけです。Share URL を取得するにはサンドボックスを開いた状態で右上の "Share" ボタンをクリックします。
{% nexttech https://nt.dev/s/6ba1fffbd09e %}
Instagram の埋め込み
Instagram の URL に含まれている投稿の id
を入れるだけです。
{% instagram BXgGcAUjM39 %}
Speakerdeck Tag
埋め込みリンク中の data-id コードを入れるだけです。
<script async class="speakerdeck-embed"
data-id="7e9f8c0fa0c949bd8025457181913fd0"
data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
SoundCloud の埋め込み
埋め込みたい Soundcloud トラックの URL をそのまま入れるだけです。
{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}
Spotify の埋め込み
埋め込みたい Spotify トラック/プレイリスト/アルバム/アーティスト/ポッドキャストの URI を入れます。
{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
Blogcast タグ
埋め込みコードの中の記事 ID を入れるだけです。
{% blogcast 1234 %}
Parler タグ
埋め込みたい Parler.io 音声ファイルの URL をそのまま入れるだけです。
{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}
Stack Exchange / Stack Overflow タグ
質問や回答の ID とサイト名が必要です。{% stackoverflow %}
タグを使う場合は、サイトはデフォルトで Stack Overflow になります。
例: https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console
- この質問 ID は:
24789130
{% stackoverflow 24789130 %}
他の Stack Exchange ネットワークサイトについては、{% stackexchange %}
タグを使い、サイト名を入れる必要があります。例:
https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf
- この質問 ID は:
169988
- このサイト名は
diy
{% stackexchange 169988 diy %}
回答の場合、回答の ID はその回答の "Share" リンクから取得できます。例: https://diy.stackexchange.com/a/170185
- この質問 ID は:
170185
- このサイト名は
diy
{% stackexchange 170185 diy %}
Wikipedia の埋め込み
埋め込みたい Wikipedia 記事の URL をそのまま入れます(アンカーの有無は自由)。
{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}
{% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}
Asciinema の埋め込み
Asciinema ID を入れるだけです。
{% asciinema 239367 %}
{% asciinema https://asciinema.org/a/239367 %}
Reddit Tag
Enter the full URL of the post you want to embed
{% reddit https://www.reddit.com/r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet %}
コードの例として Liquid タグを処理する
Liquid タグをコードとして表示したい場合は、バッククォート 1 つまたは 3 つで挟むだけです。
`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`
ただし raw
タグを使う場合は例外で、正しくエスケープするには、このようにします。
`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`
間違いやすいポイント
箇条書きの作り方は他の Markdown エディタと同じです。ただし、もし番号リストの中に画像を挟む場合は、リストの番号がリセットされるのを防ぐため、必ず画像の頭をインデントしてください。例えばこのようにします。
最後に、Markdown チートシート(英語)をもう一度ご案内します。
素敵なご投稿お待ちしております! 📝