-
-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow HTML Tags in Code Snippet #62
Comments
Could you provide a snippet with your HTML tags that works in highlight.js but not highlight.php? And if you could provide a snippet that breaks with safe mode disabled too, that'd be great! If one snippet meets both requirements, then that's fine too! This way I can debug where the differences in behavior are.
This makes me very happy to hear! 😄 |
I’m on mobile now, sorry. With highlight.js, it is possible to wrap custom elements across token: → http://jsfiddle.net/toubia95/bDW8H With highlight.php, it gets encoded: → https://mecha-cms.com/store/extension/t-o-c Use element inspector to get the generated markup. |
Executing Code to highlight
highlight.php <span class="hljs-comment">// fonction pour créer un objet date</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">gjsCreerObjetDate</span>(<span class="hljs-params">jour, mois, annee</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(annee, mois - <span class="hljs-number">1</span>, jour);
} highlight.js <span class="hljs-comment">// fonction pour créer un objet date</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">gjsCreerObjetDate</span>(<span class="hljs-params">jour, mois, annee</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(annee, mois - <span class="hljs-number">1</span>, jour);
} In your JSFiddle, you are using In the following example, I'll use highlight.php with Even though it doesn't match highlight.js behavior, $hl = new Highlighter();
$text = <<<CODE
// fonction pour créer un objet date
function gjsCreer<mark>ObjetDate(jo</mark>ur, mois, annee) {
return new Date(annee, mois - 1, jour);
}
CODE;
echo $hl->highlight('javascript', $text)->value; <span class="hljs-comment">// fonction pour créer un objet date</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">gjsCreer</span><<span class="hljs-title">mark</span>><span class="hljs-title">ObjetDate</span>(<span class="hljs-params">jo<<span class="hljs-regexp">/mark>ur, mois, annee) {
return new Date(annee, mois - 1, jour);
}</span></span></span> highlight.js with const code = `// fonction pour créer un objet date
function gjsCreer<mark>ObjetDate(jo</mark>ur, mois, annee) {
return new Date(annee, mois - 1, jour);
}`;
console.log(hljs.highlight('javascript', code).value); // fonction pour créer un objet date
function gjsCreer<mark>ObjetDate(jo</mark>ur, mois, annee) {
return new Date(annee, mois - 1, jour);
} With all of this in mind, let me think a bit about whether or not to support this behavior and add a In my opinion, embedding HTML in a code snippet to bring emphasis to something isn't the way to do things. I personally would make a preprocessor to take special markup, remove it, highlight it, and have a postprocessor reinsert the markup. But that is beyond the scope of this project. Using |
Maybe this behaviour can be resolved by detecting whether the input is already escaped or not to tell the parser to escape input before proccessing it or not (or simply add an option to disable auto-escape the input). But as this project really depends on the highlight.js specification then I can’t do anything. Most of code snippet highlighted with highlight.js must be escaped because without escaping it, we will end up with broken HTML markup whenever JavaScript is disabled, if we have some HTML snippet to be highlighted. |
Would be good if we can leave the Here are some specs: Case 1Beforeabcd <a>"efgh"</a> ijk Afterabcd <a><span class="hljs-string">"efgh"</span></a> ijk or: abcd <span class="hljs-string"><a>"efgh"</a></span> ijk Case 2Beforeab<a>cd "ef</a>gh" ijk Afterab<a>cd </a><span class="hljs-string"><a>"ef</a>gh"</span> ijk or: ab<a>cd <span class="hljs-string">"ef</span></a><span class="hljs-string">gh"</span> ijk |
It's not that escaping is the problem, it's how to handle an entirely different language during the highlighting process. Let's take a language with generics (TypeScript) as an example: function doSomething<T>(arg: T, accuracy: number) {} Because highlight.js works in the browser with a DOM, you can have actual HTML elements in the mix but if you're using highlight.js via Node, you can't easily. Let's say you want to highlight "doSomething" in this example. You have two options: Without escaping function <mark>doSomething</mark><T>(arg: T, accuracy: number) {} With escaping function <mark>doSomething</mark><T>(arg: T, accuracy: number) {} Regardless of whether or not you escape the incoming text, that won't change the fact that our highlighter will not know how to handle
This is why I feel a pre+post-processor would be needed so whenever |
Just got an idea. For the preprocessor, I can store the HTML tag match offset using $tokens = preg_split('/(<[^>]+>)/', $input, null, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_OFFSET_CAPTURE);
$out = $hl->highlight('html', strip_tags($input));
$out->value = post_process($out->value, $tokens);
// Etc. |
Sure that could possibly work. Just make sure you take into consideration that your offsets will be different from the original source code since |
After thinking about this further, I'm unable to come up with a solution that would work robustly across multiple languages and scenarios. Right now, both highlight.js and highlight.php take in unescaped code (e.g. HTML, XML, languages with generics) and will auto-escape them during the highlighting process and return valid HTML. I feel like introducing a function like I'm open to revisiting this topic if someone has a robust way of handling this problem and including it in the |
The reason I use highlight.js in my blog was because it allows me to preserve HTML tags inside the code snippet. Knowing that there is a highlight.php project makes everything so perfect! But one thing is missing; that is the ability to retain HTML tags inside the code snippet. I used to add
<mark>
tags to explain to my readers about the important parts, and maybe some<a>
tags to link some piece of code to the documentation page.How do I keep the HTML markup in my code snippet? Disabling the “safe mode” does not work for me. It always throws “`self` is not supported at the top-level of a language.” message anyway.
By the way, I have used your project to complete my content management system extension here. This project fits my environment so well 👍
Thanks.
The text was updated successfully, but these errors were encountered: