# Markdown preview and result differ

**URL:** https://meta.discourse.org/t/markdown-preview-and-result-differ/263878
**Category:** Bug
**Tags:** composer
**Created:** [May 4, 2023, 8:05pm UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878 "2023-05-04T20:05:18Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![roke\_julian\_lockhart](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roke_julian_lockhart/32/540179_2.png) [@roke\_julian\_lockhart](https://meta.discourse.org/u/roke_julian_lockhart)
#### Post date: [May 4, 2023, 8:05pm UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/1 "2023-05-04T20:05:18Z")

</div>

Per [Creating bug reports for Discourse on Meta](https://meta.discourse.org/t/create-bug-reports-for-discourse-on-meta/33070)

# [try.discourse.org](http://try.discourse.org)

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/f/6/ff682a89665173cd0b1ea966a40aa0a62587cd0e.png)

[https://try.discourse.org/t/word1-word2-word3-word4/1430?u=rokejulianlockhart](https://try.discourse.org/t/word1-word2-word3-word4/1430?u=rokejulianlockhart)

# [discuss.kde.org](http://discuss.kde.org)

[https://discuss.kde.org/t/difference-between-preview-and-actual-post/1245/2?u=rokejulianlockhart](https://discuss.kde.org/t/difference-between-preview-and-actual-post/1245/2?u=rokejulianlockhart)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [May 4, 2023, 8:22pm UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/2 "2023-05-04T20:22:38Z")

</div>

Hi @roke_julian_lockhart

I can repro it and the preview indeed differs from the post. 🙂

The empty line below or above your tags plays a little role here but it’s not important. If you remove them, it will wrap the closest next and previous content, but not the _whole_ content.

> **no empty lines**
>
> ~~Additionally, how come
> 
> ```qml
> import QtQuick
> import QtQuick.Controls 2.15 as QQC2
> import QtQuick.Layouts
> import QtPositioning
> 
> ```
> 
> ~~
> 
> and prepension of `QQC2` before `Action`, `Button`, `ApplicationWindow`, and `Frame` doesn’t work, whereas
> 
> ```qml
> import QtQuick
> import QtQuick.Controls
> import QtQuick.Layouts
> import QtPositioning
> import QtQuick.Controls 2.15 as QQC2
> 
> ```
> 
> ~~and addition of `QQC2.Button` (per [[qml+pyqt6] Can't get native control appearance - #2 by carl - Help - KDE Discuss](https://discuss.kde.org/t/qml-pyqt6-cant-get-native-control-appearance/1240/2?u=rokejulianlockhart)) does?  
> A new line  
> ~~
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/c/2/4/c24ccb34a39551a456fe377fc85c1b5ab2b37102.png)

* * *

That said…  
I thought the issue was because `<strike>`\[1\] was an inline element. I can repro it with other tags such as `<b>` or `<i>`, but not `<strong>`, `<em>`. So it’s not because it’s an inline-level element. Discourse allows wrapping blocks with inlines, from what I can see with `<strong>` or `<em>`.

> **\<strong\>**
>
> ````plaintext
> <strong>
> 
> Additionally, how come
> 
> ```qml
> import QtQuick
> import QtQuick.Controls 2.15 as QQC2
> import QtQuick.Layouts
> import QtPositioning
> ```
> 
> and prepension of `QQC2` before `Action`, `Button`, `ApplicationWindow`, and `Frame` doesn't work, whereas
> 
> ```qml
> import QtQuick
> import QtQuick.Controls
> import QtQuick.Layouts
> import QtPositioning
> import QtQuick.Controls 2.15 as QQC2
> ```
> 
> and addition of `QQC2.Button` (per https://discuss.kde.org/t/qml-pyqt6-cant-get-native-control-appearance/1240/2?u=rokejulianlockhart) does?
> A new line
> 
> </strong>
> 
> ````
> 
> ![image](https://global.discourse-cdn.com/meta/original/4X/8/7/3/8738849306ee0cbb0ed949dd697eee31a9b8d98a.png)

It seems not to be related to [authorized tags](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115), since Discourse accepts all these tags (`<strike>`, `<s>`, `<b>`, `<strong>`, `<i>`, `<em>`…).

It seems not to be a markdown-it quirk either, since I can’t reproduce the issue in [their demo](https://markdown-it.github.io/).

* * *

1. Note that `<strike>` is deprecated in favor of `<s>` . A detail that won’t change anything in this issue, but always good to know… I just learned it right now after all 😄

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 5, 2023, 1:28am UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/4 "2023-05-05T01:28:59Z")

</div>

Took a quick look out of curiosity. It looks like an issue with the `Nokogiri` library. 🤔

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/2/9/9296a72cfb6dd9cdd19916afd0ad6257a0732b5e.png)

From what uses Discourse here:

> <https://github.com/discourse/discourse/blob/7ff8e5580f9a900cde4be66377cf4f1dcd253a35/lib/pretty_text.rb#L314>

`Loofah.fragment` uses Nokogiri’s HTML4 parser.

This could be fixed using `Loofah.html5_fragment` as long as `Nokogiri` \>= 1.14.0 and `Loofah` \>= 2.21.0. Discourse already uses `Nokogiri::HTML5.fragment`; that would make sense.

Note: `Loofah` [2.21.0](https://github.com/flavorjones/loofah) is not yet released; currently in RC1.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 5, 2023, 3:45am UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/5 "2023-05-05T03:45:14Z")

</div>

Fantastic debugging! Thanks  
🙏

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 8, 2023, 3:30am UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/6 "2023-05-08T03:30:47Z")

</div>

going to bookmark this for 30 days, hopefully then the new loofah is out and we can simply upgrade it.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 12, 2023, 2:36am UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/8 "2023-05-12T02:36:20Z")

</div>

I just tried the HTML5 version of loofah and we are hitting a security issue it seems:

[https://github.com/discourse/discourse/pull/21522](https://github.com/discourse/discourse/pull/21522)

```plaintext

  1) PrettyText provides safety for img bbcode
     Failure/Error: expect(cooked).to eq(html)
     
       expected: "<p><img src=\"http://aaa.com&lt;script&gt;alert(1);&lt;/script&gt;\" alt=\"\" role=\"presentation\"></p>"
            got: "<p><img src=\"http://aaa.com<script>alert(1);</script>\" alt=\"\" role=\"presentation\"></p>"
     
       (compared using ==)
     # ./spec/lib/pretty_text_spec.rb:2150:in `block (2 levels) in <main>'
     # ./spec/rails_helper.rb:358:in `block (2 levels) in <top (required)>'
     # /home/sam/.gem/ruby/3.2.1/gems/webmock-3.18.1/lib/webmock/rspec.rb:37:in `block (2 levels) in <top (required)>'

```

This one feels very risky to me… will raise…

---

<div class="post-metadata">

### Author: ![nat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nat/32/235063_2.png) [@nat](https://meta.discourse.org/u/nat)
#### Post date: [June 20, 2023, 12:43pm UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/9 "2023-06-20T12:43:06Z")

</div>

Many thanks for your debugging! We’ve fixed this with:

[https://github.com/discourse/discourse/pull/21522](https://github.com/discourse/discourse/pull/21522)

as seen here:

> Additionally, how come
> 
> ```qml
> import QtQuick
> import QtQuick.Controls 2.15 as QQC2
> import QtQuick.Layouts
> import QtPositioning
> 
> ```
> 
> and prepension of `QQC2` before `Action`, `Button`, `ApplicationWindow`, and `Frame` doesn’t work, whereas
> 
> ```qml
> import QtQuick
> import QtQuick.Controls
> import QtQuick.Layouts
> import QtPositioning
> import QtQuick.Controls 2.15 as QQC2
> 
> ```
> 
> and addition of `QQC2.Button` (per [[qml+pyqt6] Can't get native control appearance - #2 by carl - Help - KDE Discuss](https://discuss.kde.org/t/qml-pyqt6-cant-get-native-control-appearance/1240/2?u=rokejulianlockhart)) does?

---

<div class="post-metadata">

### Author: ![nat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nat/32/235063_2.png) [@nat](https://meta.discourse.org/u/nat)
#### Post date: [June 22, 2023, 12:43pm UTC](https://meta.discourse.org/t/markdown-preview-and-result-differ/263878/10 "2023-06-22T12:43:50Z")

</div>

This topic was automatically closed after 2 days. New replies are no longer allowed.
