Web開発でマークダウンを使用する方法

Sep 12, 2025

操作方法

Web開発者とコンテンツの作成者として、私たちは一般的に中に包まれているテキストを書く時間をたくさん費やします html コード。マークダウンでそれをするためのより良い方法があるとあなたに言ったらどうなりますか？あなたがコードではなく文章に焦点を当てることができた方法は？

マークダウンは、2004年にJohn GruberとAaron Swartzによって開発されたプレーンテキスト、軽量マークアップ言語です。もともとXHTML / HTMLを簡単に作成するために作成されたものは、プレーンテキストファイルを構造的に有効なHTMLまたはXHTMLに変換することによって、マークダウンを使用することができます。

比較的簡単な場合、あなたが最初に起動したときにマークダウンは少し威圧することができます。しかし、あなたがそれをハングアップすると、あなたのコンテンツを入力するのではなく、コードをフォーマットした時間がどのくらいかかりましたか。

01.マークダウンエディタを選択してください

Webのマークダウンをしているときは、直面している可能性のある基本的な構文と制限を理解することが重要です。始める前に、あなたのサイトのためのいくつかの種類のエディタとインタプリタが必要です。あるいは、公開前にマークダウンを変えることができます。

You'll need some kind of editor to get started — はじめにさせるためのいくつかの種類のエディタが必要です

選択できる編集者がいくつかあります。仲間の HTMLやPDFなど、幅広いエクスポートオプションを提供しているため、素晴らしいです。もう一つの素晴らしい代替品です積載 - 無料のオンラインマークダウンエディタ。もちろん、プレーンテキストエディタが機能します。

Jetpack is handy for use with WordPress — JetpackはWordPressでの使用に便利です

マークダウンをHTMLに変換することを計画していない場合は、サイト用のプラグイン（またはインタラプタ）を取得できます。ワードプレスのために、ジェットパック MarkDownをサポートするための優れたサポートがあります。これにより、そのオプションを有効にする限り、投稿やコメントの中で直接マークダウンを使用できます。

マークアップ言語と同様に、MarkDownには独自の構文があります。注：さまざまな種類のマークダウンがあります。この記事では、一般的な共有構文のみをカバーします。

02.見出しを設定します

HTMLでは、6つの見出しスタイルがあります。 h1. 、 h2 、 h3. 、 h4. 、 h5. そして h6. 。マークダウンでこれらを再作成するには、一連のハッシュタグシンボルを使用します（＃） - 見出し番号に対応します - その後に見出しテキストが続きます。たとえば、ANを作成するには ＆lt; h1＆gt; タグ、1つのハッシュタグを使用してください＃ ;のために ＆lt; h2＆gt; タグ、2つのハッシュタグを使用してください ## ;など。

マークダウン入力：

＃見出し1
##見出し2
###見出し3
####見出し4.
#####見出し5.
######見出し6

HTML出力：

 H1＆GT; H1＆GT。
＆lt; H2＆GT;見出し2＆lt; h2及びgt。
＆lt; H3＆GT;見出し3＆h3＆gt。
＆lt; H4＆GT;見出し4＆lt; / h4;
＆lt; H5＆GT;見出し5＆h5＆gt。
＆lt; H6＆GT;見出し6＆h6＆gt;

03.段落をマークします

段落はそれによって表されます ＆lt; p＆gt; HTMLのタグ。マークダウンでは、それらは1つ以上の空白行によって分離されています。 HTMLのように、空白は無視されます。それで、あなたが20個の空白行を追加するならば、まだ1つの段落を持つだけです。

マークダウン入力：

クイックブラウンキツネは怠惰な犬の上に飛びます。
彼は怠惰な犬だから、怠惰な犬は気にしません。

HTML出力：

＆lt; P＆GT;急な茶色のキツネは怠惰な犬の上に飛びます。＆lt; / p＆gt;
＆lt; p＆gt;怠惰な犬は気にしない、彼は怠惰な犬です。＆p＆gt; / p＆gt;

04.ラインブレイクのスタイル

HTMLで表されるラインブレーク ＆lt; br＆gt; タグは、前の行の終わりに2つのスペースを持つ、単一の行の破断を使用して追加されます。

マークダウン入力：

クイックブラウンキツネ
怠惰な犬を飛び越えてください。

HTML出力：

 P＆GT;クイックブラウンキツネ＆LT;怠惰な犬を飛び越えてください。＆p＆gt;

05.強調をマークします

あなたのテキストに強調された2つの方法があります：イタリック） ＆lt;＆gt; HTMLで）または太字で ＆lt;強い＆gt。 HTMLで）。

マークダウンで、あなたは1つか2つのアスタリスクを使ってこれを達成します（ * ）。アンダースコア（_）を使用することもできますが、他のものにアンダースコアを使用する他のマークダウンのフレーバーがあるため、アスタリスクに固執することができます。

マークダウン入力：

 *イタリック体のテキスト*
**太字のテキスト**

HTML出力：

＆lt;イタリック体のテキスト＆lt; / em＆gt;
＆lt;強い＆gt;太字のテキスト/ strong＆gt;

注：3つのアスタリスクを使用して太字の斜体のテキストを作成することもできます。 ***太字とイタリック体のテキスト*** 。

06.水平規則を作成します

水平規則を作成するには（OR ＆lt; hr＆gt; HTMLでは、3つ以上のハイフンを一連のもの（ - --- ）、アスタリスク（ *** ）または等しい標識（ ==== ）。あなたが好むのはあなたの選択ですが、あなたがあなたが上下の空の回線を含めることを確認してください。

マークダウン入力：

何か新しいことを学ぶことは常にたくさんの楽しみです。

 -  ---

それは確かです！

HTML出力：

＆lt; p＆gt;何か新しいことを学ぶことは常にたくさんの楽しみです。＆lt; / p＆gt;
＆lt; hr＆gt;
＆lt; p＆gt;確かに！＆lt; / p＆gt;

07.画像とリンクを追加します

HTMLでは、画像を使用して画像を追加します ＆lt; img＆gt; タグとリンクはこれを使用して追加されます ＆lt; a＆gt; 鬼ごっこ。

マークダウンで、画像は感嘆符から始まります（！）、続いて角括弧（ [] ）「Alt Text」、および括弧の場合（（））画像へのパスの場合。二重引用符内にオプションのタイトルを含めることもできます（ "" ）。

リンクを使用すると、感嘆符がないことを除いて、ほぼ同じです。

マークダウン入力：

！[Alt Text]（/ path / to / image.jpg "オプションのタイトル"）
[リンクテキスト]（http://example.com "オプションのタイトル"）

注：参照リンクや画像を使用することもできますが、それはここではカバーされていません。

HTML出力：

08.リストを作成します

HTMLのリストには2種類のリストがあります。 ＆lt; OL＆GT; ）そして順序付けられていない（ ＆lt; ul＆gt; ）。マークダウンを使用すると、注文リスト、およびアスタリスクの番号を使用します（ * ）またはハイフン（ - 順序付けられていないリストについて。

マークダウン入力：

 1。アイテム1.
2.アイテム2.
*最初の商品
* 2番目の商品
 - 最初の商品
 - 第2項

HTML出力：

 OL＆GT;
＆lt; li＆gt。項目1＆lt; li＆gt。
＆lt; li＆gt。項目2＆lt; / li gt;
＆lt; / OL＆GT;
＆lt; ul＆gt;
＆lt; li＆gt。最初の項目＆lt; / li＆gt。
＆lt; li＆gt; 2番目の項目/ li＆gt;
＆lt; / ul＆gt;
＆lt; ul＆gt;
＆lt; li＆gt。最初の項目＆lt; / li＆gt。
＆lt; li＆gt; 2番目の項目/ li＆gt;
＆lt; / ul＆gt;

09.インラインコードとコードブロックを追加します

HTMLでコードを使用しているときは、それを使用してインライン要素として含めることができます。 ＆lt;コード＆gt; タグまたはを使用したプリフォーマットのテキストブロックとして ＆lt; Pre＆GT;コード＆gt; 組み合わせ。

マークダウンでは、これらの要素は各側面の単一のバックトックを使用して区切られています（ ` ）;またはコードブロックの上下の3つのバックトックを含むフェンススタイルを使用することによって（ `` ` ）。

マークダウン入力：

`numberofpoints`変数はプレイヤーのスコアを保持します。 Player.Wins { NumberOfPoints + = 1 }

HTML出力：

＆lt;コード＆gt; numberofpoints＆lt; /コード＆gt;変数はプレイヤーのスコアを保持します。＆lt; Pre＆GT;コード＆gt; Player.Wins { NumberOfPoints + = 1 } ＆lt; / pre＆gt; / code＆gt;

10.ブロッククォートをスタイルアップ

BlockQuotesはHTMLで追加されます 鬼ごっこ。マークダウンで、シンボルより大きいシンボルを使用します（ ＆gt; 行前に。

マークダウン入力：

＆gt。これは私のBlockQuoteです。
＆gt;
＆gt;これは同じBlockQuoteの一部です。
＆gt;これは新しいBlockQuoteです。

HTML出力：

11.インラインHTMLを埋め込む

サポートされていないHTML要素を作成する必要がある場合があります。たとえば、Aを必要とする可能性があります ＆lt;テーブル＆gt; または ＆lt; div＆gt; 鬼ごっこ。

その場合は、マークダウンとHTMLを混在させることができますが、いくつかの制限があります。たとえば、ブロックレベルのHTMLタグ内にマークダウンを含めることはできません。

続きを読む：

あなたが知る必要がある20 Node.jsモジュール
12の一般的なJavaScriptの質問に回答しました
HTMLとCSSを学ぶための最良のリソースの9

Web開発でマークダウンを使用する方法

01.マークダウンエディタを選択してください

02.見出しを設定します

03.段落をマークします

04.ラインブレイクのスタイル

05.強調をマークします

06.水平規則を作成します

07.画像とリンクを追加します

08.リストを作成します

09.インラインコードとコードブロックを追加します

10.ブロッククォートをスタイルアップ

11.インラインHTMLを埋め込む

操作方法 - 最も人気のある記事

キャンバスを伸ばす方法とオイル塗料の設定

視点を描く方法

Zbrushで3Dと漫画アートを組み合わせた方法

エクスプレスエフェクトアニメーションをHTML5にエクスポートする

ハードサーフェスモデリングのための10のヒント

Daz StudioとZbrushの間の移動方法

写真をVRセットに変換する

10トップヒューディーチュートリアル

カテゴリ