Go to Qiita Advent Calendar 2024 Top
LoginSignup
CLRR
@CLRR (Carlos Luis Rafael Rivera)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

VScodeのMarkdown Preview Enhancedでのコメントアウトした行の表示について

Q&A

MarkdownPandocVSCodeMarkdownPreviewEnhanced

解決したいこと

VSCodeのMarkdown Preview Enhancedのプレビュー画面で，「コメントアウトした行が空行扱いとなり，それに伴い新しい段落が始まってしまう」という挙動を止めたいです。

発生している問題・エラー

例えば，次のような文章をMarkdownファイルに記入しているとします。

Due to the evolving situation of COVID-19,
I will conduct
almost all experiments
<!-- will be conducted -->
via
web-based formats of

このMarkdownについて，コメントアウトした行<!-- will be conducted -->を無視し，コメントアウトした行の周囲の単語（つまり，experimentsとvia）が半角スペース1個おいて即つながるようにしたいです。表示例は次の通りです。

enter image description here

しかし，実際のプレビューでは，次の写真の通り，コメントアウトされた行が空行となります。また，コメントアウトされた行の後に，別途新しい段落が始まってしまいます。

enter image description here.

なお，Markdown Preview Enhancedの設定を変更し，markdown-preview-enhanced.usePandocParser": trueとすることで，Markdownからプレビューをレンダリングする際に，pandocを使うようにしました。

Markdwon Preview Enhancedで使われるプレビューのテーマを決めるcssファイルを編集すれば解決しそうな気もしますが，cssに詳しくないため，どこを変更すればよいか分かりません（そもそもcss編集で解決するかも確かではありません）。

お詳しい方いらっしゃいましたら，教えていただけないでしょうか。

0

3Answer

uasi
@uasi

以下のようにコメントマーカーの前に半角スペースを入れることで前後の行が同じ段落になりました。

line1
 <!-- comment -->
line2
2Like
uasi
@uasi

pandoc は Markdown のバリエーションをいくつかサポートしていますが、それぞれで結果が違いますね。 GitHub-Flavored Markdown や CommonMark はご質問のようにコメント位置で段落が分割されますし、 MultiMarkdown などは分割されません。

input.md
foo
<!-- comment -->
bar

% pandoc --from markdown --to html5 input.md
<p>foo <!-- comment --> bar</p>

% pandoc --from markdown_mmd --to html5 input.md
<p>foo <!-- comment --> bar</p>

% pandoc --from gfm --to html5 input.md
<p>foo</p>
<!-- comment -->

<p>bar</p>

% pandoc --from commonmark --to html5 input.md
<p>foo</p>
<!-- comment -->

<p>bar</p>

Markdown Preview Enhanced の設定で pandoc に --from=markdown を渡すと望んだ表示になるかもしれません。（試していません）

CSS ではコメントによって段落が分割されたのか元々2つの段落なのか判別できないので対応できないと思います。

コメントマーカーの書き方にこだわりがなければ、以下のように開始マーカーを前の行に置くことでも分割を回避できます。

foo<!--
comment -->
bar
0Like

Comments

  1. @CLRR

    Questioner

    ご回答ありがとうございます！

    Markdown Preview Enhanced の設定で pandoc に `--from=markdown` を渡すには，`markdown-preview-enhanced.pandocMarkdownFlavor`に設定を書き込む必要があります。そのため，この`markdown-preview-enhanced.pandocMarkdownFlavor`の設定を変更しました。ただ，設定の初期値が`markdown-raw_tex+tex_math_single_backslash`であり，既に`--from=markdown`になっています。また，設定の中で，`markdown`の他，`markdown_mmd`などにも変えましたが，どれもプレビュー結果は変わらず，コメントアウトした行が空行とみなされてしまいます。

    この点，私の端末固有の現象か知りたいので，もしよろしければお手元でもご確認いただけないでしょうか…？

    ちなみにご回答では`--to html5`とありますが，`--to html`ではなく，`--to html5`の方がよろしいのでしょうか。Markdown Preview Enhanced の設定の中では，`--to`の部分は`--to html`になります。また，私は，Markdown Preview Enhanced の設定で`--to`の部分をどのように変えたらよいのか分からずにおります。

    自分が行っている編集作業の都合上，コメントアウトのマーカーは，前後の行の中に含めず別行で書きたいと思っています。ただ，マーカーの場所で分割が防げることは知りませんでしたので，勉強になりました。ありがとうございます。

  2. @uasi

    別の回答に書きましたが、プレビューする Markdown を pandoc に渡す前にコメントを空行にする変換が入るようでした。 pandoc の設定では対応できそうにないです。

    変換で挿入される要素は Scroll Sync のための情報に見えるので、 Scroll Sync をオフにしてみましたが、変わらず挿入されていました。

    --to html と --to html5 はエイリアスのようなのでどちらでも同じ意味だと思います。

  3. @CLRR

    Questioner

    2つ目の回答ありがとうございます。拝読いたしました。なるほど，Pandocではなく，Markdown Preview Enhancedの方が，自動的にコメントを空行にするようpタグを入れるのですね。教えてくださった内容を基に，開発者にも連絡を取ります。ご教示本当にありがとうございました！

  6. @uasi

    コメントを空行に変換する処理も mume にありました。

    https://github.com/shd101wyy/mume/blob/7135d7606a6a57de6e2372c26a2f16bb98ecf2b2/src/transformer.ts#L474-L490

    コメントマーカーが行の先頭にあるときだけコメントを<del>空行3つに変換</del>（訂正： p 要素を挿入）するようです。

    ということはマーカーの前に半角スペースを1つ入れれば変換を回避できますね。手元で試して前後の行が繋がることを確認しました。

  7. @CLRR

    Questioner

    変換は違うパッケージで行っていたのですね…想像もつきませんでした。教えて下さりありがとうございます。mumeの設定・スクリプトも変更しながら，自分にあったプレビューになるよう調整します！

    マーカー直前に半角スペースを入れる方法も分かりました。こちらもトライします！

    本当にいろいろと教えて下さりありがとうございました！

  8. @CLRR

    Questioner

    備忘と経過報告を兼ねてコメントいたします。

    mume にある「コメントを空行に変換する処理」
    https://github.com/shd101wyy/mume/blob/7135d7606a6a57de6e2372c26a2f16bb98ecf2b2/src/transformer.ts#L474-L490
    は，ローカルだと次の場所にあります。ファイル名は「transformer.ts」から変わり，「transformer.js」です。

    .vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.22\node_modules\@shd101wyy\mume\out\src\transformer.js

    現在，このtransformer.jsの中のcommentEnd近辺を確認し，動作を見ているところです。

  9. @CLRR

    Questioner

    解決いたしましたので，ご報告いたします。

    ローカルの
    .vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.22\node_modules\@shd101wyy\mume\out\src\transformer.js
    を編集し，冒頭が「<!--」である行を見つけたときに行う処理全体（GitHubに載っている下記のソースに対応する箇所）をコメントアウトしたところ，コメントアウト部分が空行にならなくなりました。

    https://github.com/shd101wyy/mume/blob/7135d7606a6a57de6e2372c26a2f16bb98ecf2b2/src/transformer.ts#L474-L557

    改めてご教示に感謝いたします。
uasi
@uasi

pandoc に渡される引数と標準入力をのぞき見するスクリプトを書いて Markdown Preview Enhanced の Pandoc Path に設定しました。

pandoc-spy
#!/bin/bash

echo "$@" > "$HOME/tmp/spy-args.txt"
tee "$HOME/tmp/spy-stdin.txt" | pandoc "$@"

以下の Markdown をプレビューしてみました。

input.md
# input

line1
<!-- comment1 -->
line2

line3<!--
comment2
-->
line4

デフォルトの設定で引数は以下のようになりました。

spy-args.txt
--from=markdown-raw_tex+tex_math_single_backslash --to=html --katex

pandoc の標準入力に渡される Markdown は前処理されていくつかの p 要素が挿入されていました。

spy-stdin.txt

<p data-line="0" class="sync-line" style="margin:0;"></p>

#  input {#input }

line1


<p data-line="3" class="sync-line" style="margin:0;"></p>



line2

line3<!--
comment2
-->
line4
0Like

Your answer might help someone💌

LoginSign Up