Runkit - ES6 Template Literals do not work on dev.to

[hardy925]

Describe the bug
When writing the markup for a dev.to post using runkit for code examples template literals (backticks `) are stripped out.

To Reproduce
Steps to reproduce the behavior:

1. Go to dev.to
2. Click on write a post
3. add

const test = 'test everything everywhere'
const str = `this is a ${test}`
console.log(str)

4. Click on preview to see error (image attched)
   

Expected behavior
template literals used in dev.to's runkit embedded environment to be supported
Here is an example from runkits demo page

Screenshots
Markdown:

Result:

Expected:

• OS: MAC
• Browser: Chrome
• Version: Version 71.0.3578.98 (Official Build) (64-bit)

Additional context
The bug was discovered while updating a post as a request PR here: hardy613/es6-notes#13

[maestromac]

Thank you for reporting this issue. This is most likely caused by this method https://github.com/thepracticaldev/dev.to/blob/master/app/labor/markdown_parser.rb#L130

[hardy925]

That looks like the culprit!

Thank you for taking time to look and label the issue.

[stale]

Thanks for contributing to this issue. As it has been 90 days since the last activity, we are automatically closing the issue in 7 days. This is often because the request was already solved in some way and it just wasn't updated or it's no longer applicable. If this issue still requires attention, please respond with a comment. Happy Coding!

[Zhao-Andy]

Still an issue unfortunately.

[jessleenyc]

@mariocsee is this resolved? saw there's a merged PR referenced.

[hardy925]

Hey @jessleenyc,

I just tested again with this content:

and using the preview feature I received this result:

Unfortunately, I believe this is still an issue.

Cheers.

[rianadon]

It looks like this is an issue of the markdown parser running on the runkit code.

If I use HTML code inside the runkit tag like:

console.log('This content is <i>Italic</i>');

it renders as such:

The <i> tags are stripped out.

[rianadon]

Adding a code fence around the JavaScript but inside the RunKit tag fixes the issue.

{% runkit %}
```
const test = 'test everything everywhere'
const str = `this is a ${test}`
console.log(str)
```
{% endrunkit %}

It would seem like the easiest fix would be to introduce a preprocessing step in the markdown renderer. We would find all runkit tags and edit their bodies to contain code blocks around their contents before running the Markdown parser.

However, this approach would fail the following scenario:

`{% runkit %}` is a tag!

Since the Liquid tag loses its meaning once wrapped within a code block.

The only bug-free method of solving the issue I can think of would be to use two passes over the markdown. The first renders it as-is and keeps track of which liquid tags are parsed and which are left as-is. The second uses this information to replace the parsed liquid tags of type runkit with code fences.

This solution sounds like an over-complication that would better be replaced by documentation, so maybe we could mention in the runkit docs that surrounding the code in code blocks solves parsing errors and is recommended.

[wolfhoundjesse]

Would this solely require adding an explanation to views/pages/_editor_liquid_help.html.erb and views/pages/_editor_guide_text.html.erb? E.g.:

If your code contains Template Literals, you can fence the code block to preserve the backticks and prevent a parsing error:

{% runkit %}
```  
console.log(`Good morning, ${user}`)
```
{% endrunkit %}

I'm feeling this issue because I just researched how to put backticks in code blocks in Markdown on GitHub. 😂

[cmgorton]

Looks like this might be a duplicate of this issue #1228 . I am going to close this issue and anymore discussion on a possible fix for this can be added to #1228