Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Markdown Basics 🤓

Below are some examples of commonly used markdown syntax. If you want to dive deeper, check outthis cheat sheet.

Bold & Italic

Italics:*asterisks* or _underscores_

Bold:**double asterisks** or __double underscores__

Links

I'm an inline link:[I'm an inline link](put-link-here)

Inline Images

example image, with sloan![Image description](put-link-to-image-here)

Headers

Add a header to your post with this syntax:


#One '#' for a h1 header
##Two '#'s for a h2 header
...
######Six '#'s for a h6 header

One '#' for a h1 header

Two '#'s for a h2 header

Six '#'s for a h6 header

🌊 Liquid Tags

We support nativeLiquid tags in our editor, but have created our own custom tags as well. A list of supported custom embeds appears below. To create a custom embed, use the complete URL:
{% embed https://... %}

Supported URL Embeds

  • DEV Community Comment
  • DEV Community Link
  • DEV Community Link
  • DEV Community Listing
  • DEV Community Organization
  • DEV Community Podcast Episode
  • DEV Community Tag
  • DEV Community User Profile
  • asciinema
  • CodePen
  • CodeSandbox
  • DotNetFiddle
  • GitHub Gist, Issue or Repository
  • Glitch
  • Instagram
  • JSFiddle
  • JSitor
  • Loom
  • Kotlin
  • Medium
  • Next Tech
  • Reddit
  • Replit
  • Slideshare
  • Speaker Deck
  • SoundCloud
  • Spotify
  • StackBlitz
  • Stackery
  • Stack Exchange or Stack Overflow
  • Twitch
  • Twitter
  • Twitter timeline
  • Wikipedia
  • Vimeo
  • YouTube

Supported Non-URL Embeds

Call To Action (CTA)

{% cta link %} description {% endcta %}

Provide alink that a user will be redirected to. Thedescription will contain the label/description for the call to action.

Details

You can embed adetails HTML element by using details, spoiler, or collapsible. Thesummary will be what the dropdown title displays. Thecontent will be the text hidden behind the dropdown. This is great for when you want to hide text (i.e. answers to questions) behind a user action/intent (i.e. a click).

{% details summary %} content {% enddetails %}{% spoiler summary %} content {% endspoiler %}{% collapsible summary %} content {% endcollapsible %}

KaTex

Place your mathematical expression within a KaTeX liquid block, as follows:

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

To render KaTeX inline add the "inline" option:

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

RunKit

Put executable code within a runkit liquid block, as follows:

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

Parsing Liquid Tags as a Code Example

To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.

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

One specific edge case is with using theraw tag. To properly escape it, use this format:

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

Here's the Markdown cheatsheet again for reference.

Happy posting! 📝
DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp