編集ガイド 🤓

  • Migdal への書き込みは Markdown 記法で整形します。
  • 多くの場合、本文の行中に直接 HTML を挟むことができます。
  • Liquid タグを使ってツイートや動画などの高度なコンテンツを埋め込むことができます。
  • 意見をもらうためなどに、非公開記事も特定の URL からアクセス可能です。
  • 見出し画像のサイズは 1000 × 420 がおすすめです。

ここではよく使われる Markdown 構文の用例を示しています。もっと深く知りたい方は こちらのチートシート(英語)をご覧ください。

斜体: *半角アスタリスク* か _半角アンダーバー_

太字: **半角アスタリスク2つ** か __半角アンダーバー2つ__

これはリンクです: [これはリンクです](リンク先-url)


      ## 目次
        * [第 1 章](#chapter-1)
        * [第 2 章](#chapter-2)

      ### 第 1 章 <a name="chapter-1"></a>

記事やコメントに GIF を貼り付ける場合、1 ページ 1 コマあたり 2 億画素までの制限があります。 example image, with sloan

example image, with sloan
HTML の figcaption タグでキャプションもつけられます!


# '#' 1 個で レベル 1 見出し
## '#' 2 個で レベル 2 見出し
###### '#' 6 個で レベル 6 見出し


<!-- この内容は記事に現れません! -->

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.

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:

![Image description](/file-path/my-image.png)

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

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](/file-path/my-image.png)

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.

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

### Speed

Sloths move at a maximum speed of 0.27 km/h!

エディタでは標準の 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 のユーザー名を入れるだけです。

{% user jess %}


{% tag git %}

コメントの URL 末尾の ID を入れるだけです。コメントの URL を取得するには、投稿時間の部分をクリックするか、右上角のメニューから「リンクをコピー」をクリックします。使い方は以下の通りです。

{% comment 2d1a %}

ポッドキャストの配信回の URL をそのまま入れるだけです。

{% podcast https://migdal.jp/basecspodcast/s2e2--queues-irl %}

告知の 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 の Liquid タグを使うと、サーバー側でツイートを整形し、読者にわかりやすく表示できます。URL 中のツイート id を入れるだけです。

{% twitter 834439977220112384 %}

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 earthy-course %}

タグで使えるいくつかの optional attributes があります。ID の後ろに半角スペースに続けて追加できます。


Shows the app preview without the code.

{% glitch earthy-course app %}

Shows the code without the app preview.

{% glitch earthy-course code %}

Swap panes: Show the app preview on the left and the code on the right.

{% glitch earthy-course preview-first %}

Hides the avatar of the creator(s).

{% glitch earthy-course no-attribution %}

Hides the file browser.

{% glitch earthy-course no-files %}

Lets you choose which file to display in the code panel. Defaults to index.html.

{% glitch earthy-course file=script.js %}

GitHub ユーザー名とリポジトリ名が必要です。

{% github forem/forem %}

GitHub タグにno-readme オプションを加えると、プレビューに readme ファイルを表示しません。

{% github forem/forem no-readme %}

GitHub イシュー、プルリク、コメントの URL を入れるだけです。

{% github https://github.com/forem/forem/issues/9 %}

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 の URL を入れるだけです。

{% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %}

URL 中の id を入れるだけです。

  • YouTube: {% youtube dQw4w9WgXcQ %}
  • Vimeo: {% vimeo 193110695 %}
  • Twitch: {% twitch ClumsyPrettiestOilLitFam %}

埋め込みたい 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 の key を入れるだけです。

{% slideshare rdOzN9kr1yK5eE %}

次のような pen ID code で終わる CodePen link をそのまま入れるだけです。

{% codepen https://codepen.io/twhite96/pen/XKqrJX %}

default-tab パラメータを CodePen 埋め込みタグに設定します。デフォルトは result です。

{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}

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 %}

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 %}

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 %}

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 %}

Add multiple parameters to your CodePen embed tag.

{% codepen https://codepen.io/propjockey/pen/dyVMgBg height=300 default-tab=css,result editable=true %}

実行可能な 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 liquid ブロックに入れます。

{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
// visible, reader-editable JavaScript code goes here
{% endrunkit %}

数式を以下のように KaTeX liquid ブロックに入れます。

{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}

KaTeX を行の途中に入れるには "inline" オプションを使います。

{% katex inline %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}

Stackblitz の ID を入れるだけです。

{% stackblitz ball-demo %}

デフォルトビューを変更することができます。オプションは both, preview, editorで、デフォルトは both です。

{% stackblitz ball-demo view=preview %}


{% stackblitz ball-demo file=style.css %}

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:


Which url to initially load in address bar.

{% codesandbox ppxnl191zx initialpath=/initial/load/path %}

Which module to open by default.

{% codesandbox ppxnl191zx module=/path/to/module %}

Delays when code is ran if 1

{% codesandbox ppxnl191zx runonclick=1 %}

以下のような 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 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 %}

ドメイン名の後の URL を入れるだけです。

{% replit @WigWog/PositiveFineOpensource %}

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

サンドボックスの share URL を入れるだけです。Share URL を取得するにはサンドボックスを開いた状態で右上の "Share" ボタンをクリックします。

Share Replit sandbox

{% nexttech https://nt.dev/s/6ba1fffbd09e %}

Instagram の URL に含まれている投稿の id を入れるだけです。

{% instagram BXgGcAUjM39 %}

埋め込みリンク中の data-id コードを入れるだけです。

<script async class="speakerdeck-embed"
data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}

埋め込みたい Soundcloud トラックの URL をそのまま入れるだけです。

{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}

埋め込みたい Spotify トラック/プレイリスト/アルバム/アーティスト/ポッドキャストの URI を入れます。

{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}

埋め込みコードの中の記事 ID を入れるだけです。

{% blogcast 1234 %}

埋め込みたい Parler.io 音声ファイルの URL をそのまま入れるだけです。

{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}

質問や回答の 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 記事の URL をそのまま入れます(アンカーの有無は自由)。

{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}
{% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}

Asciinema ID を入れるだけです。

{% asciinema 239367 %}
{% asciinema https://asciinema.org/a/239367 %}

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 タグをコードとして表示したい場合は、バッククォート 1 つまたは 3 つで挟むだけです。

`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`

ただし raw タグを使う場合は例外で、正しくエスケープするには、このようにします。

`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`

箇条書きの作り方は他の Markdown エディタと同じです。ただし、もし番号リストの中に画像を挟む場合は、リストの番号がリセットされるのを防ぐため、必ず画像の頭をインデントしてください。例えばこのようにします。 example image of writing lists with images in Markdown

最後に、Markdown チートシート(英語)をもう一度ご案内します。

素敵なご投稿お待ちしております! 📝