question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Certain code tag content breaks AMP output

See original GitHub issue

Issue Summary

Adding '$example$' to the markdown truncates the AMP output before the second $ causing broken browser rendering through missing closing tags.

screen shot 2018-07-04 at 13 33 07

To Reproduce

  1. Create a new post and set the content to:
Testing

`'$example$'` asdf

123
  1. Publish the post and open the AMP version on the blog front-end. Note the broken display and missing content after '$example.

The HTML output is clearly malformed. the trailing $' is removed and the rest of the helper output is added to the bottom of the post with the final section duplicated:

screen shot 2018-07-04 at 14 07 19

This results in the browser injecting lots of extra <code></code> tags to try and deal with the malformed HTML.

Removing the SafeString call so that handlebars outputs the raw string appears to show that there’s a nested async helper issue:

<div class="kg-card-markdown">
  <p>Testing</p>
  <p>
    <code>'$example__aSyNcId_<_ZziCMbqm__#x27;</code>
    asdf
  </p>
  <p>123</p>
</div>

Narrowing the troublesome content down it appears to be caused by a trailing $ or $' in any element. This can be demonstrated with simply putting $ as the only markdown content in a post.

Technical details:

  • Ghost Version: 1.24.7
  • Node Version: 8.10.0
  • Browser/OS: n/a
  • Database: SQLite

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:15 (14 by maintainers)

github_iconTop GitHub Comments

2reactions
jtwebmancommented, Aug 27, 2018

Opened a PR. https://github.com/barc/express-hbs/pull/149

Once it is merged and published in a new version we can open a PR to update the version in this repo.

1reaction
jtwebmancommented, Dec 3, 2018

Still waiting for the permissions to publish the merge and then we can make sure this fixes this issue by testing out the new version here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

html - Display new line in code tag - Stack Overflow
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks." This means...
Read more >
AMP validation errors
This error occurs when exactly one instance of the tag is allowed, and a duplicate is found. The full list of unique tags...
Read more >
HTML <pre> Tag - GeeksforGeeks
The <pre> tag in HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, ...
Read more >
&nbsp and HTML Space Challenges and Tricks | Mailtrap Blog
Break. The <br> tag is a popular way of creating spaces in HTML. While it's handy in blog posts such as this one,...
Read more >
Structural markup and right-to-left text in HTML - W3C
This article looks at ways of handling text direction for structural markup in HTML, ie. at the document level and for elements like ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found