2015年11月2日月曜日

Markdown内でHTMLやCSSを使う

Markdown内でHTMLやCSSを使う

Markdownでは、その文章内にHTMLコードをそのまま打ち込み、表示させることができます。

また、CSSも使えるので、Markdownでは行き届かない表示も細かく設定できます。

2カラム形式にするのも、Markdownのテーブルを使うよりは、HTMLでMarkupしたほうが速く、意図どおりに表示することができるかもしれません。

スタイルの定義の仕方は、<style></style>内に書いていきます。

<style type="text/css">
  .article {
    line-height: 3.0;
  }
  hr {
    page-break-after: always;
  }
</style>


hr {page-break-after: always;}

という指定は、”水平線の後では、印刷のときに改ページを入れる” というものです。
文書の区切りに水平線を使い、そこで印刷時に次の文書を別ページの頭から表示させたいというときには便利です。
水平線でなくとも、別のタグのスタイルに、

“page-break-after: always;”
“page-break-before: always;”

などと指定しても同様です。
また、imgタグもつかえるので、そのまま、簡易的なWebページが作成できます。

Sublime Text 3 で Markdown を使う際に使用した Package Plug-ins

OmniMarkupPreviewer

cmd + option + o でブラウザでプレビュー
ブラウザの更新なしで、変更がリアルタイムで反映
Pandoc を使わなくても、ソースからHTMLコードをGetできる

Markdown Extended

Markdown 内のコードの Syntax Highlighter

SmartMarkdown

見出しの行で tab キーを押せば、見出しのブロックを折りたためる

MarkdownEditing

Syntax Highlighter
HTH.

0 件のコメント:

コメントを投稿