[highlightjs] Add new addon

MrPetovan commented

2018-09-16 15:15:23 +02:00

(Migrated from github.com)

Since we aren't doing syntax highlighting in the core, I'd figured people would like a replacement, and this is the one.

Depends on https://github.com/friendica/friendica/pull/5773

Related to https://github.com/friendica/friendica/pull/5765 Since we aren't doing syntax highlighting in the core, I'd figured people would like a replacement, and this is the one. Depends on https://github.com/friendica/friendica/pull/5773

annando commented

2018-09-17 15:58:58 +02:00

(Migrated from github.com)

We are so late in the release that I really have problems in merging some huge PR like this and the corresponding one in the core. We surely would need several days of testing - but I would prefer having the release this week.

MrPetovan commented

2018-09-17 17:07:33 +02:00

(Migrated from github.com)

This can actually wait, the other can't. No post with highlighted code was coming through at all.

MrPetovan commented

2018-09-17 17:24:00 +02:00

(Migrated from github.com)

The only interesting file in this addon is highlightjs.php, the rest is the JS library itself.

The only interesting file in this addon is `highlightjs.php`, the rest is the JS library itself.

rabuzarus commented

2018-09-18 11:11:24 +02:00

(Migrated from github.com)

Does it work with new content added by ajax (next page / new posts) ?

MrPetovan commented

2018-09-18 14:03:45 +02:00

(Migrated from github.com)

That's an excellent question, I haven't been able to see this in the wild yet, but I don't believe it would.

MrPetovan commented

2018-09-19 04:14:52 +02:00

(Migrated from github.com)

Issue confirmed, no syntax highlighting on ajax (re)load.

rabuzarus commented

2018-09-19 12:31:58 +02:00

(Migrated from github.com)

For new posts:
I would say we would need a new js hook in main.js before we update the scroll position. Maybe at the end of updateConvItems(). When the hook is called the addon would need to execute something like

$('pre > code').each(function() {
     hljs.highlightBlock(this);
})

(https://github.com/highlightjs/highlight.js/issues/966#issuecomment-152122946)
or

var blocks = document.querySelectorAll('pre code:not(.hljs)');
Array.prototype.forEach.call(blocks, highlightBlock);)

(https://github.com/highlightjs/highlight.js/issues/909#issuecomment-131686186)

Same for loadScrollContent();

or we use another javascript code highlighter

For new posts: I would say we would need a new js hook in `main.js` before we update the scroll position. Maybe at the end of `updateConvItems()`. When the hook is called the addon would need to execute something like ``` $('pre > code').each(function() { hljs.highlightBlock(this); }) ``` (https://github.com/highlightjs/highlight.js/issues/966#issuecomment-152122946) or ``` var blocks = document.querySelectorAll('pre code:not(.hljs)'); Array.prototype.forEach.call(blocks, highlightBlock);) ``` (https://github.com/highlightjs/highlight.js/issues/909#issuecomment-131686186) Same for `loadScrollContent();` or we use another javascript code highlighter

👍 1

rabuzarus commented

2018-09-19 12:57:57 +02:00

(Migrated from github.com)

or we use another javascript code highlighter

maybe Prism (http://prismjs.com). We would execute Prism.highlightAll(); at the end of updateConvItems() (https://schier.co/blog/2013/01/07/how-to-re-run-prismjs-on-ajax-content.html) or if we want to have an eye on performance we could use Prism.highlightAllUnder(element, async, callback) for the new content (https://prismjs.com/extending.html).

> or we use another javascript code highlighter maybe Prism (http://prismjs.com). We would execute `Prism.highlightAll();` at the end of `updateConvItems()` (https://schier.co/blog/2013/01/07/how-to-re-run-prismjs-on-ajax-content.html) or if we want to have an eye on performance we could use `Prism.highlightAllUnder(element, async, callback)` for the new content (https://prismjs.com/extending.html).

MrPetovan commented

2018-09-19 16:35:56 +02:00

(Migrated from github.com)

Thank you for looking into it, my plan was to add an custom event on the <body> tag triggered by the Ajax load and then add an event listener in the <script> tag added by the addon. This is the most unobtrusive way of handling this, and it may be used for other addons as well without having to tamper with the main JS routine.

Thank you for looking into it, my plan was to add an custom event on the `<body>` tag triggered by the Ajax load and then add an event listener in the `<script>` tag added by the addon. This is the most unobtrusive way of handling this, and it may be used for other addons as well without having to tamper with the main JS routine.

MrPetovan commented

2018-09-20 04:57:41 +02:00

(Migrated from github.com)

Phew!

I managed to make syntax highlighting work with Ajax, but not without completely reworking the Javascript hooks and rewriting the MathJax addon in the process 🤔

Phew! I managed to make syntax highlighting work with Ajax, but not without completely reworking the Javascript hooks and rewriting the MathJax addon in the process 🤔

MrPetovan commented

2018-09-21 03:52:47 +02:00

(Migrated from github.com)

I added ways to register stylesheets and javascript files so that no HTML is written by hand in the hooks.

I had to create two new hooks and remove a completely useless part of App->page, but it's ready now.

I added ways to register stylesheets and javascript files so that no HTML is written by hand in the hooks. I had to create two new hooks and remove a completely useless part of `App->page`, but it's ready now.

MrPetovan commented

2018-10-01 19:27:05 +02:00

(Migrated from github.com)

This is ready to merge now.

[highlightjs] Add new addon #737