search

flarum / framework

Simple forum software for building great communities.
http://flarum.org/
6.37k stars 835 forks source link

Markdown's code formatting is showing invisible JavaScript code #532

Closed ghost closed 9 years ago

ghost commented 9 years ago

Markdown's code formatting is showing invisible JavaScript code where's must display it.

See: http://discuss.flarum.org/d/1031-hyn-analytics/10

It seems caused by the use of <!-- and --> tags.

ghost commented 9 years ago

I tried by removing the commentary tags, it worked, but not totally. The </script> tag is not displayed: http://discuss.flarum.org/d/1031-hyn-analytics/11

ghost commented 9 years ago

By the way, I tested it in Firefox, Chrome and Microsoft Edge. Same bug.

JoshyPHP commented 9 years ago

It's a CSS bug, perhaps an interaction between Highlight.js's style and Flarum's. The text is there but it's not visible.

I can't reproduce locally on beta1.

JoshyPHP commented 9 years ago

Actually it's not a CSS bug. The parts that are not visible are nested deep inside span elements with opacity:0.5, deep enough that it becomes fully transparent. It may be due to a race condition that makes the Highlight.js library load/execute multiple times. That issue is fixed is s9e\TextFormatter master. If that's the culprit, the next update will fix it.

JoshyPHP commented 9 years ago

@tobscure If you upgrade to 0.4.0 or later I think it will fix this issue.

franzliedke commented 9 years ago

Okay, I did that. Thanks!

JoshyPHP commented 9 years ago

Actually this issue isn't fixed. I tracked it down to this code, which uses an older version of the JavaScript used for highlighting.

I'm going to publish an update to the CODE BBCode that will handle highlighting regardless of whether the post comes from a static page, the live preview or was loaded dynamically via Mithril.

Mecvak commented 9 years ago

Well it's mostly fixed. The text stays displayed but is very faded out. At least using the example in the linked post

JoshyPHP commented 9 years ago

It looks like it's ok because there's only one code block on the page. The text is displayed with opacity:0.9.The problem is a race condition that happens when multiple posts are loaded at once. The opacity gets reduced multiple times in a row and you end up with invisible text.

Mecvak commented 9 years ago

@JoshyPHP You're absolutely right

JoshyPHP commented 9 years ago

@tobscure @franzliedke I've just released 0.4.2 with a new CODE BBCode which I think should make this block of code obsolete. Once you upgrade to 0.4.2 you should be able to remove that block and thus fix this issue, and posts will still be highlighted. I don't have a live install at the moment though, so I haven't tested it in Flarum.

tobyzerner commented 9 years ago

@JoshyPHP Awesome, thanks! The link to this block of code isn't working though – I think I know which one you're talking about, but can you post the proper link just to be sure?

JoshyPHP commented 9 years ago

Right, I messed up my copy/paste. It's this one: https://github.com/flarum/core/blob/80665450fcad732f9954291641b5229b08adb016/js/forum/src/components/CommentPost.js#L60-L68

You'll be able to remove loadHljs() too.

tobyzerner commented 9 years ago

@JoshyPHP Unfortunately it seems the <script> you added to TextFormatter output doesn't get executed in Flarum, because Flarum uses a JS framework (Mithril), which means the post content is rendered via setting innerHTML. But I'll look into adapting the updated script into Flarum's loadHljs function to fix this bug.