編集ガイド 🤓

ポイント

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 億画素までの制限があります。 example image, with sloan

![画像の代替テキスト](画像-url)

見出し

以下の構文で記事に見出しをつけられます。

# '#' 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:

![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.

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

### Speed

Sloths 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" ボタンをクリックします。

Share Replit sandbox

{% 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 エディタと同じです。ただし、もし番号リストの中に画像を挟む場合は、リストの番号がリセットされるのを防ぐため、必ず画像の頭をインデントしてください。例えばこのようにします。 example image of writing lists with images in Markdown

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

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

Migdal は創作言語・世界愛好者の憩いの場です