Certain code tag content breaks AMP output
See original GitHub issueIssue Summary
Adding '$example$'
to the markdown truncates the AMP output before the second $
causing broken browser rendering through missing closing tags.
To Reproduce
- Create a new post and set the content to:
Testing
`'$example$'` asdf
123
- 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:
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:
- Created 5 years ago
- Comments:15 (14 by maintainers)
Top 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 >  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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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.