主页
2026-10-31 · ガイド

Markdownコンテンツ例：見出しからメディアまで

見出し、文字装飾、リスト、表、コード、メディアなど、記事テンプレートで使える書式を紹介します。

Markdown文章作成サンプル
Markdownコンテンツ例：見出しからメディアまで

これはそのままプレビューできるMarkdown記事のサンプルです。サイト上での表示を確認し、コピーして自分の記事に合わせて編集できます。見出しや説明、メディアのURLはすべて例です。

まず内容をわかりやすく書き、そのあとで書式を選びましょう。適切なレイアウトは理解を助けますが、内容そのものの代わりにはなりません。

記事の構成

見出しのレベルを使ってテーマを整理できます。各セクションに導入を書き、必要に応じて小見出しで詳しく説明しましょう。

テーマの下にある小見出し

これは通常の段落です。背景を紹介したり、考えを説明したり、次に扱う内容を示したりできます。段落の間には空行を入れます。

さらに詳しい小節

見出しはさらに細分化できます。文字サイズを変えるためにレベルを飛ばさず、順番に使いましょう。

インラインの文字装飾

本文では太字、斜体、取り消し線、インラインコード、通常のリンクを使えます。キーワードやコマンド、参考資料を示すのに便利です。

リストと引用

箇条書き

  • 1つ目：要点や材料を列挙します。
  • 2つ目：各項目を文章にしても構いません。
  • 3つ目：2つのスペースでインデントすると、入れ子にできます。
    • サブ項目 A
    • サブ項目 B

番号付きリスト

  1. 解決したい問題を決めます。
  2. 手順を順番に説明します。
  3. 結果や次の行動をまとめます。

タスクリスト

  • タイトルと概要を用意
  • 記事の構成を作成
  • 自分の内容に置き換える

表

短く比較できる情報には表が便利です。

コンテンツ用途例
段落紹介と説明背景
リスト関連する項目準備
コード技術的な例設定

コード

npm run build のようなコマンドはインラインコードで示せます。コードブロックには言語名を付けると、シンタックスハイライトが使われます。

type Article = {
  title: string;
  published: boolean;
};

const example: Article = {
  title: "Markdownコンテンツ例",
  published: true,
};

console.log(example.title);

Shellなど、ほかの言語も指定できます。

npm install
npm run dev

画像とメディア

画像

Markdown記法で画像を挿入できます。次の例ではサイト内のアバターを使っています。自分の記事では public/ 内の画像に置き換えてください。

サイト画像の例

サイズやCSSクラスを指定する場合はHTMLも使えます。

正方形画像の例

音声

音声にはHTMLの <audio> 要素を使います。公開する際は、利用許可のある音声ファイルに置き換えてください。

動画ファイル

<video> で動画を再生できます。src はローカルのメディアパス、またはアクセス可能な動画URLに置き換えてください。

埋め込み動画

動画サービスによってはiframeの埋め込みコードが提供されています。次の例はYouTubeのプライバシー強化モードです。公開前に動画IDを置き換え、埋め込みが許可されているか確認してください。

補足

折りたたみ表示は補足説明に便利です。必要なければ削除できます。

クリックして補足を表示

用語の説明や追加のヒントなど、本文の流れに影響しない内容を記載できます。

まとめ

記事には導入、複数レベルの見出し、メディア、まとめを組み合わせられます。すべての要素を使う必要はありません。内容に合った書式を選び、このサンプルの文章、画像、メディアURLを忘れずに置き換えてください。

2026-10-31 · Guides

Markdown Content Showcase: From Headings to Media

A ready-to-preview article template demonstrating heading levels, text formatting, lists, tables, code, and media.

MarkdownWriting guideExample
Markdown Content Showcase: From Headings to Media

This is a ready-to-use Markdown article example. Use it to see how content appears on the site, then copy, edit, and replace it with your own. The headings, descriptions, and media URLs below are demonstration material.

Make the content clear first, then choose its formatting. Good formatting helps readers understand; it does not replace the content.

Article structure

Use heading levels to organize topics. Start each section with an introduction, then add more specific subsections when needed.

A subsection under a topic

This is a regular paragraph. Use paragraphs to introduce background, explain an idea, or preview what comes next. Leave a blank line between paragraphs.

A more specific section

Headings can be nested further. Use heading levels in order rather than skipping levels just to change the font size.

Inline text formatting

The body supports bold, italic, strikethrough, inline code, and regular links. Use these to highlight terms, command names, or references.

Lists and quotes

Unordered list

  • First item: list a point or material.
  • Second item: an item can be a complete sentence.
  • Third item: indent two spaces for nested items:
    • Sub-item A
    • Sub-item B

Ordered list

  1. Identify the problem to solve.
  2. Explain the process step by step.
  3. Summarize the result or what to do next.

Task list

  • Add a title and summary
  • Create the article structure
  • Replace the sample with your own content

Tables

Tables work well for short, comparable information:

Content typeGood forExample
ParagraphIntroduction and explanationBackground
ListRelated pointsPreparation
CodeTechnical examplesConfiguration

Code

Use inline code for commands such as npm run build. Add a language identifier to a fenced code block for syntax highlighting:

type Article = {
  title: string;
  published: boolean;
};

const example: Article = {
  title: "Markdown Content Showcase",
  published: true,
};

console.log(example.title);

You can use other language identifiers, such as Shell:

npm install
npm run dev

Images and media

Images

Insert images with Markdown. This example uses the site avatar; replace it with an image from the public/ directory when writing your own article.

Site image example

Use HTML when you need a specific size or CSS class:

Square image example

Audio

Use the HTML <audio> element for audio. Replace the sample URL with an audio file you have permission to use:

Video files

Use <video> to play a video file. Replace src with a local media path or an accessible video URL:

Embedded video

Some video platforms provide iframe embed code. This example uses YouTube’s privacy-enhanced mode; replace the video ID and check that embedding is allowed before publishing:

Extra notes

Use collapsible content for supplementary explanations, or remove it when not needed:

Show a supplementary note

Use this space for terminology, extra tips, or details that are not essential to the main text.

In summary

An article can combine an introduction, sections at different heading levels, media, and a conclusion. You do not need to use every component; choose the format that suits the content. Remember to replace the text, images, and media URLs in this example.

2026-10-31 · 使用指南

Markdown 内容示例：从标题到多媒体

这是一篇可直接预览的文章模板示例，展示常见标题层级、文字格式、列表、表格、代码和多媒体内容。

Markdown写作指南示例
Markdown 内容示例：从标题到多媒体

这是一篇可直接使用的 Markdown 示例文档。你可以从中了解文章在网站上的呈现方式，再复制、删改并替换成自己的内容。文中的标题、说明和媒体地址都是演示素材。

写作时先把内容讲清楚，再考虑格式。合适的排版能帮助读者理解，而不是取代内容本身。

文章结构

文章可以用不同层级的标题划分主题。每个标题下面都可以先写一段介绍，再继续细分内容。

二级主题下的子标题

这是一个普通段落。这里可以介绍背景、解释概念，或用几句话说明接下来要讨论什么。段落之间留一个空行即可。

更深一层的小节

标题层级可以继续细分。建议按顺序使用标题，不要为了字号跳过层级。

行内文字格式

正文支持粗体、斜体、删除线、行内代码和普通链接。这些格式适合标出关键词、程序名称或相关资料。

列表与引用

无序列表

  • 第一项：列出要点或材料。
  • 第二项：每一项可以写成完整句子。
  • 第三项：需要嵌套时缩进两个空格：
    • 子项目 A
    • 子项目 B

有序列表

  1. 先确定要解决的问题。
  2. 再按步骤说明过程。
  3. 最后总结结果或下一步行动。

任务清单

  • 写好标题和简介
  • 添加正文结构
  • 替换成自己的真实内容

表格

表格适合展示简短、可比较的信息：

内容类型适用场景示例
段落介绍和解释背景说明
列表并列要点准备材料
代码技术示例配置片段

代码

在行内代码中可以写 npm run build。多行代码块可以指定语言，以启用语法高亮：

type Article = {
  title: string;
  published: boolean;
};

const example: Article = {
  title: "Markdown 内容示例",
  published: true,
};

console.log(example.title);

也可以使用其他语言标记，例如 Shell：

npm install
npm run dev

图片与媒体

图片

图片可使用 Markdown 语法插入。下例使用项目自带的头像图片，写文章时可换成 public/ 目录里的其他图片路径。

项目图片示例

需要调整尺寸或添加 CSS 类时，也可以使用 HTML：

方形图片示例

音频

使用 HTML 的 <audio> 元素添加音频。请将示例地址替换为自己有权使用的音频文件：

视频文件

使用 <video> 播放视频文件。把 src 换成本地媒体路径或可访问的视频地址：

视频嵌入

部分视频平台提供 iframe 嵌入代码。下面以 YouTube 隐私增强模式为例；发布前请替换视频 ID，并确认平台允许嵌入：

补充说明

可折叠内容适合放置补充解释，不需要时也可以直接删除：

点击展开补充说明

这里可以放置术语解释、额外提示或不影响主线阅读的内容。

写作小结

一篇完整的文章可以由介绍、多个层级的章节、媒体和结尾组成。写作时不需要把所有组件都用上，选择最适合内容的格式即可。完成后，记得替换这篇示例中的文本、图片和媒体地址。

2026-10-31 · 가이드

Markdown 콘텐츠 예제: 제목부터 미디어까지

제목 단계, 텍스트 서식, 목록, 표, 코드와 미디어 등 글 템플릿에서 사용할 수 있는 형식을 소개합니다.

Markdown글쓰기 가이드예제
Markdown 콘텐츠 예제: 제목부터 미디어까지

이 글은 바로 미리 볼 수 있는 Markdown 예제 문서입니다. 사이트에서 콘텐츠가 어떻게 보이는지 확인한 다음 복사하고 수정해 자신의 글로 바꿔 보세요. 제목과 설명, 미디어 주소는 모두 예시입니다.

먼저 내용을 명확하게 쓴 뒤 형식을 고르세요. 알맞은 서식은 이해를 돕지만 내용 자체를 대신하지는 않습니다.

글의 구성

제목 단계를 사용해 주제를 나눌 수 있습니다. 각 섹션에서 먼저 간단히 소개하고 필요한 경우 하위 제목으로 더 자세히 설명하세요.

주제 아래의 하위 제목

일반 문단입니다. 배경을 소개하거나 개념을 설명하고, 이어질 내용을 간단히 안내할 수 있습니다. 문단 사이에는 빈 줄을 둡니다.

더 세부적인 소제목

제목은 여러 단계로 나눌 수 있습니다. 글자 크기를 바꾸기 위해 단계를 건너뛰지 말고 순서대로 사용하세요.

인라인 텍스트 서식

본문에서는 굵게, 기울임, 취소선, 인라인 코드, 일반 링크를 사용할 수 있습니다. 키워드나 명령어, 참고 자료를 표시할 때 유용합니다.

목록과 인용

글머리 기호 목록

  • 첫 번째 항목: 요점이나 자료를 나열합니다.
  • 두 번째 항목: 각 항목을 완전한 문장으로 써도 됩니다.
  • 세 번째 항목: 두 칸 들여쓰기로 중첩 목록을 만들 수 있습니다.
    • 하위 항목 A
    • 하위 항목 B

번호 목록

  1. 해결할 문제를 정합니다.
  2. 과정을 순서대로 설명합니다.
  3. 결과나 다음 행동을 정리합니다.

작업 목록

  • 제목과 요약 작성
  • 글 구조 추가
  • 실제 내용으로 바꾸기

표

짧고 비교 가능한 정보를 보여줄 때 표를 사용하면 좋습니다.

콘텐츠 유형용도예시
문단소개와 설명배경 설명
목록관련 항목준비 사항
코드기술 예제설정 코드

코드

npm run build 같은 명령어는 인라인 코드로 표시할 수 있습니다. 코드 블록에 언어를 지정하면 구문 강조가 적용됩니다.

type Article = {
  title: string;
  published: boolean;
};

const example: Article = {
  title: "Markdown 콘텐츠 예제",
  published: true,
};

console.log(example.title);

Shell 등 다른 언어도 지정할 수 있습니다.

npm install
npm run dev

이미지와 미디어

이미지

Markdown 문법으로 이미지를 넣을 수 있습니다. 아래 예시는 사이트 아바타를 사용하므로, 직접 작성할 때는 public/ 폴더의 이미지로 바꾸세요.

사이트 이미지 예제

크기나 CSS 클래스를 지정해야 한다면 HTML도 사용할 수 있습니다.

정사각형 이미지 예제

오디오

오디오에는 HTML <audio> 요소를 사용합니다. 게시할 때는 사용 권한이 있는 오디오 파일로 주소를 바꾸세요.

동영상 파일

<video> 요소로 동영상을 재생할 수 있습니다. src를 로컬 미디어 경로나 접근 가능한 동영상 주소로 바꾸세요.

동영상 임베드

일부 동영상 서비스는 iframe 임베드 코드를 제공합니다. 아래는 YouTube 개인정보 보호 강화 모드 예제입니다. 게시 전에 동영상 ID를 바꾸고 임베드가 허용되는지 확인하세요.

추가 설명

접을 수 있는 영역은 보충 설명에 적합합니다. 필요하지 않으면 삭제해도 됩니다.

눌러서 보충 설명 보기

용어 설명, 추가 팁 또는 본문 흐름에 꼭 필요하지 않은 내용을 넣을 수 있습니다.

마무리

글에는 도입부, 여러 단계의 제목, 미디어와 마무리를 조합할 수 있습니다. 모든 요소를 사용할 필요는 없습니다. 내용에 알맞은 형식을 고르고, 이 예제의 문장과 이미지, 미디어 주소를 실제 내용으로 바꾸세요.

2026-10-31 · 使用指南

Markdown 內容範例：從標題到多媒體

這是一篇可直接預覽的文章範本，展示常見標題層級、文字格式、清單、表格、程式碼與多媒體內容。

Markdown寫作指南範例
Markdown 內容範例：從標題到多媒體

這是一篇可直接預覽的 Markdown 文章範例。你可以先查看內容在網站上的呈現方式，再複製、修改並替換成自己的文章。文中的標題、說明與媒體網址皆為示範素材。

先把內容說清楚，再選擇合適的格式。良好的排版可以幫助讀者理解，但不能取代內容本身。

文章結構

可以使用不同層級的標題來整理主題。每個章節都可以先簡單介紹，再視需要使用子標題補充細節。

主題下的子標題

這是一個一般段落。你可以介紹背景、解釋概念，或簡單說明接下來要討論的內容。段落之間留一個空行即可。

更細一層的小節

標題可以繼續細分。建議依序使用標題層級，不要只為了改變字體大小而跳級。

行內文字格式

內文支援粗體、斜體、刪除線、行內程式碼和一般連結。適合標示關鍵詞、指令名稱或參考資料。

清單與引用

無序清單

  • 第一項：列出重點或材料。
  • 第二項：每個項目也可以寫成完整句子。
  • 第三項：縮排兩個空格可建立巢狀項目：
    • 子項目 A
    • 子項目 B

有序清單

  1. 先確定要解決的問題。
  2. 再依序說明處理步驟。
  3. 最後整理結果或下一步行動。

任務清單

  • 撰寫標題與摘要
  • 建立文章結構
  • 替換成自己的實際內容

表格

表格適合呈現簡短且可比較的資訊：

內容類型適用情境範例
段落介紹與說明背景資訊
清單相關要點準備事項
程式碼技術範例設定片段

程式碼

像 npm run build 這類指令可以使用行內程式碼。程式碼區塊可以指定語言，以顯示語法上色：

type Article = {
  title: string;
  published: boolean;
};

const example: Article = {
  title: "Markdown 內容範例",
  published: true,
};

console.log(example.title);

也可以指定 Shell 等其他語言：

npm install
npm run dev

圖片與媒體

圖片

可以使用 Markdown 語法插入圖片。以下範例使用網站內的頭像，撰寫自己的文章時可替換成 public/ 目錄中的其他圖片。

網站圖片範例

若需要指定尺寸或 CSS 類別，也可以使用 HTML：

方形圖片範例

音訊

使用 HTML <audio> 元素加入音訊。發布時請替換成自己有權使用的音訊檔案：

影片檔案

使用 <video> 播放影片。請將 src 替換成網站中的媒體路徑或可存取的影片網址：

嵌入影片

部分影片平台會提供 iframe 嵌入程式碼。以下使用 YouTube 隱私權強化模式；發布前請替換影片 ID，並確認平台允許嵌入：

補充說明

可收合區塊適合放置額外說明，不需要時也可以直接刪除：

點擊展開補充說明

這裡可以補充術語解釋、額外提示，或不影響主要閱讀脈絡的內容。

寫作小結

一篇文章可以由介紹、多層級章節、多媒體和結尾組成。不必使用所有元件，選擇最適合內容的格式即可。完成後，記得將範例中的文字、圖片與媒體網址換成自己的內容。