Idea for keep-markup plugin (or fork)

[felixsanz]

Since you can't add (or anything) to html syntax (markup) here is an idea.
(Also, i didn't get this plugin to work correctly inside javascript code, only on CSS snippets).

data-mark="4[20-32],5[0-50]..."

add at line 4, character 20
add at line 4, character 32
add at line 5, character 0
add at line 5, character 50

If need multiple marks in the same line:

data-mark="4[20-32,40-62],5[0-50]..."

What do you think? I would make a PR but i would need years to understand Prism codebase and decades to being able to make a plugin 😞

Of course this is more a plugin/mark than a plugin/keep-markup

[zeitgeist87]

Since you can't add (or anything) to html syntax (markup) here is an idea.

It works for me. You have to escape the HTML-code like this:

<pre><code class="language-markup">&lt;p><mark>Test</mark>&lt;/p></code></pre>

(Also, i didn't get this plugin to work correctly inside javascript code, only on CSS snippets).

Could you provide a online demo page, that reproduces your problem? Before we can fix a bug, we have to be able to reproduce it. As I understand it, it should work with any language.

We recently fixed a small bug that isn't in the latest release yet. You could try the version you get from http://prismjs.com/download.html and see if the bug is still there.

If need multiple marks in the same line:

data-mark="4[20-32,40-62],5[0-50]..."

What do you think?

Your idea sounds nice. If someone submits a PR, I would be happy to review it.

[Golmote]

This looks related to #496

[LeaVerou]

Counting lines and characters sounds like a huge hassle to me. Is there any use case where this is pleasant UX?

[felixsanz]

@LeaVerou It is indeed, but you don't have to count them. Just paste the code into an editor like Atom and place the cursor at the desired location. In the Atom bottom bar you can see "4:20" which correspond to line 4 and character 20. So after all, it's so easy to get the positions. Of course if you do it manually it will be a pain in the arse.

But the proposal is because having mark inside my code looks like a bigger hassle and too dirty. It makes the code less mantainable, so if i have to edit something i'll run into several problems trying to read the code again.

Consider the following:

  async function clearFolder() {
    <mark>return new Promise((resolve, reject) => {</mark>
      fs.readdir(`${app.config.cwd}/html`, (err, files) => {
        if (err) return <mark>reject(err)</mark>
        if (!files.length) return <mark>resolve()</mark>

        Promise.all(files.map(file => <mark>new Promise((resolve2, reject2) => {</mark>
          fs.unlink(`${app.config.cwd}/html/${file}`, err => {
            if (err) return <mark>reject2(err)</mark>

            <mark>resolve2()</mark>
          })
        <mark>}))).then(resolve)</mark>
      })
    <mark>})</mark>
  }

Do you understand something? Because i don't anymore. Obviusly having the syntax i proposed is hard to manage too, but it's way easier, more mantainable and avoid adding extra markup to the code.

EDIT: And of course, if you use an editor for big code examples (and you should, doing it without an editor sounds crazy), the editor will have problems highlighting it and also linters will complain (and code will not work anymore because of the markup).

Other benefits are:

• You can get rid of the marks just by removing the data-mark attribute.
• You can replace prism for the next big highlighter without having to fix every single code tag (sorry, but you know it will happen someday! 😝 Or even a newer Prism major version which breaks the plugi) - aka future-proof.
• You don't have to escape code anymore.

EDIT: I'm fine having keep-markup as it is, but having a plugin/add-marks with my proposal sounds cool