Don't replace `br`s inside `pre` elements

Open
#709 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
web-dev

Research direction

Search the HTML cleanup logic for the code that replaces
elements, then inspect how ancestor context is available during that operation. Add coverage for the provided

 syntax-highlighting markup, ensuring those line breaks remain valid while the existing replacement behavior still works elsewhere.

Written by the indexing model from the issue text.

Description

reader-mode-has-issues

In blog posts using syntax highlighting (in this particular instance, the very popular Prism.js library), line breaks are marked with <br>s inside <pre><code></code></pre>.

Example markup from syntax highlighter
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">isNode</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>	<span class="token keyword">return</span> item<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'node'</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token keyword">function</span> <span class="token function">isStreet</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>	<span class="token keyword">return</span> item<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'way'</span> <span class="token operator">&amp;&amp;</span> item<span class="token punctuation">.</span>tags<span class="token punctuation">.</span>highway<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>

<p>s, as block-level elements, are inappropriate in this context. This manifests as a validation error in EPUB files (which use XHTML). Can we check to see that the context is valid before replacing?

Dominant language
JavaScript
Stars
11.5k
Forks
732
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mozilla/readability

All issues in mozilla/readability

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.