HexoのMarkdownで勝手に改行されるのが気になる

元々JekyllのMarkdownを使っていたんですけど、HexoのMarkdownを使ってみたら、テキストで改行したところがそのままHTMLでも改行されていて気になったので調べてみました。

環境

  • OS X El Capitan バージョン 10.11.2
  • Hexo バージョン 3.1.1

Hexo？

A fast, simple & powerful blog framework

Hexo

Markdownの改行

改行

テキストに挿入された改行は最終的な結果から取り除かれる。これは、画面の大きさに応じて改行を行う処理はWebブラウザが担当すべきであるという設計思想による。強制的に改行したい場合は、行末に2つのスペースを挿入すればよい。

Markdown - Wikipedia

こういう設計思想があるようで、自分もこういう結果になることを想定して、テキストのファイルの中では適当なところで改行を入れながら書いています。 (ブラウザーでは改行して欲しくない)

PARAGRAPHS AND LINE BREAKS

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line — a line containing nothing but spaces or tabs is considered blank.) Normal paragraphs should not be indented with spaces or tabs.

The implication of the “one or more consecutive lines of text” rule is that Markdown supports “hard-wrapped” text paragraphs. This differs significantly from most other text-to-HTML formatters (including Movable Type’s “Convert Line Breaks” option) which translate every line break character in a paragraph into a
tag. When you do want to insert a
break tag using Markdown, you end a line with two or more spaces, then type return.

Yes, this takes a tad more effort to create a
, but a simplistic “every line break is a
” rule wouldn’t work for Markdown. Markdown’s email-style blockquoting and multi-paragraph list items work best — and look better — when you format them with hard breaks.

Daring Fireball: Markdown Syntax Documentation

Markdownのドキュメントにもそれらしいことが書かれています。

気になる結果

例えばMarkdownのファイルに次のように書くと

テキストに挿入された改行は最終的な結果から取り除かれる。
これは、画面の大きさに応じて改行を行う処理はWebブラウザが担当すべきであるという設計思想による。
強制的に改行したい場合は、行末に2つのスペースを挿入すればよい。

Markdown - Wikipedia

改行がそのまま<br>に置き換わってこうなってしまいます。

テキストに挿入された改行は最終的な結果から取り除かれる。
これは、画面の大きさに応じて改行を行う処理はWebブラウザが担当すべきであるという設計思想による。
強制的に改行したい場合は、行末に2つのスペースを挿入すればよい。

本当は次のようになって欲しいんです。 これがMarkdownの純粋な設計思想だと思うんです。 Markdownの方言はたくさんあるようですけどね。

テキストに挿入された改行は最終的な結果から取り除かれる。これは、画面の大きさに応じて改行を行う処理はWebブラウザが担当すべきであるという設計思想による。強制的に改行したい場合は、行末に2つのスペースを挿入すればよい。

_config.ymlの設定

Hexo uses marked as markdown renderer. You can set breaks to false to avoid line breaks. For more details: https://github.com/hexojs/hexo-renderer-marked

Broken markdown syntax · Issue #868 · hexojs/hexo · GitHub

ここにHexo memberのtommy351さんが書いているんですけど、HexoのMarkdownのエンジンにはmarkedを使っていて、breaksオプションにfalseを設定すれば良いそうです。

_config.ymlに次のような行を追加しました。

marked:
  breaks: false

次の文章もテキストに挿入された改行は取り除かれて表示されていると思います。

テキストに挿入された改行は最終的な結果から取り除かれる。 これは、画面の大きさに応じて改行を行う処理はWebブラウザが担当すべきであるという設計思想による。 強制的に改行したい場合は、行末に2つのスペースを挿入すればよい。

markedのオプション

markedについてもう少し調べてみました。 オプションの設定の例が次のように記載されていました。

Example setting options with default values:

var marked = require('marked');
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});

console.log(marked('I am using __markdown__.'));

GitHub - chjj/marked: A markdown parser and compiler. Built for speed.

  • gfm GitHub flavored markdownを有効にします。
  • tables GFM tablesを有効にします。 このオプションを有効にするためにはgfmオプションにtrueを設定しておく必要があります。
  • pedantic 可能な限り markdown.pl に準拠します。
  • sanitize 入力されたHTMLを無視(サニタイズ)します。
  • smartLists markdown.pl のリストよりも賢い動作をするようですが、説明から具体的にどういうことなのかまでは読み取れませんでした。
  • smartypants 引用符やダッシュのようなもののために"スマート"なタイポグラフィー句読点を使います。これも説明から具体的にどういうことなのかまでは読み取れませんでした。

終わり

後からpackage.jsonファイルを見たら、Markdownのエンジンにmarkedが使われていることがわかったんですが、最初はどこを見ればいいかもわからず、Hexoの情報も中国語が多くて細かいところを調べるのは大変です。 使われているエンジンがわかったら、個別にそちらを調べることをすればいいので単純な話です。

Hexoに関してはGitHubのIssuesを検索するようにしています。 同じ質問をしている人がいたりしますので、その回答を有効に活用させていただきます。

まだGitHubを有効に活用できていないので、自分でIssueを登録することもないんですけど、こういったこともやってみたいと思っています。

参考