feat: [zenn-markdown-html] VS Code 拡張機能でのスクロール同期のためのソースマップ追加 #504
Conversation
…to markdown tokens
senkenn
changed the title
senkenn
changed the title
senkenn
changed the title
| test('リンク内のリンクを変換しない', () => { | ||
| const html = renderLink('- https://example.com\n- second'); | ||
| expect(html).toEqual( | ||
| '<ul>\n<li><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer">https://example.com</a></li>\n<li>second</li>\n</ul>\n' |
There was a problem hiding this comment.
[memo] テストケースがL89と重複しているため削除。
| const iframe = parse(html).querySelector('span.zenn-embedded iframe'); | ||
| expect(iframe).toBeNull(); |
There was a problem hiding this comment.
iframeが存在しないことを確認するのはいい作戦と思いましたが、ここのテストケースの意図としては「details内のリンクが、リンクカードには変換されずリンクになる」ということを確認したいのだと思いました。
なので期待値としては以下を確認するようにしていただけますでしょうか？
aside iframeが存在しない- htmlに
<a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer">https://example.com</a>が含まれる
| escapedClass !== '' ? `${escapedClass} code-line` : 'code-line' | ||
| }" ${ | ||
| line !== undefined ? `data-line="${line}"` : '' | ||
| }>${content}</code></pre></div>`; |
There was a problem hiding this comment.
[q] このPRではなくていいのですが、highlightされたcontentにもdata-lineを設定することはできそうでしょうか？ある程度の高さがあるコードブロックだと、その部分もスクロール同期したいという要望が出てくるかなと思いまして。
There was a problem hiding this comment.
うーん申し訳ないですがなんとも言えないですね。ただ、VSCodeはそのような実装にはしていないようです。VSCodeはコードブロックの content には data-line を設けておらず、プレビュー側で調整しているようです。私もこのあたりはまだしっかりと把握できてはいないので間違っているかもしれません。
今後、コードブロック以外にも画像の調整も必要になってきそうですね。
There was a problem hiding this comment.
ご確認ありがとうございました！要望がたくさん上がってきたら検討することにしたいと思います。
This commit modifies the link rendering in the Zenn Markdown HTML tests. It replaces the usage of the 'span.zenn-embedded iframe' selector with 'aside iframe' to match the updated HTML structure. Additionally, it adds assertions to check that the rendered HTML contains the correct link format. Co-authored-by: Ryosuke Igarashi <[email protected]>
| escapedClass !== '' ? `${escapedClass} code-line` : 'code-line' | ||
| }" ${ | ||
| line !== undefined ? `data-line="${line}"` : '' | ||
| }>${content}</code></pre></div>`; |
There was a problem hiding this comment.
うーん申し訳ないですがなんとも言えないですね。ただ、VSCodeはそのような実装にはしていないようです。VSCodeはコードブロックの content には data-line を設けておらず、プレビュー側で調整しているようです。私もこのあたりはまだしっかりと把握できてはいないので間違っているかもしれません。
今後、コードブロック以外にも画像の調整も必要になってきそうですね。
📑 Summary
<h1>,<p>,<li>といった HTML タグにcode-lineクラスとdata-line={行番号}の属性を追加したsource-map.test.tsを追加した。📋 Tasks
canaryブランチに対するプルリクエストである