Syntax highlight plugin without JS, pure CSS

Question

i want to display some source code on ajax loaded page via Facebox plugin.

But if i try to add script tag

<script src="src/prettify.js"></script>

Facebox remove all script tags in loaded page.

So i need pure CSS based solution for syntax highlighting or solve removing of script tags by facebox.

Thx for any help.

css can't highlight code, since that'd just be "text" within a block. css affects blocks. with a few exceptions, css can't affect individual characters or words in a block of text. and what it CAN do to those individual chars/words isn't enough to support highlighting of arbitrary text. — Marc B, Nov 23 '12 at 15:37
Have you tried to put the javascript and script tag in the `body` of the opening page _(not the one loaded by ajax)_? — Cholesterol, Jul 11 '13 at 18:41

score 1 · Answer 1 · edited May 23 '17 at 10:31

Browsers don't execute script tags pulled in via AJAX: Inline jQuery script not working within AJAX call

The CSS only solution would be to manually wrap your code in spans and set all the coloring in CSS, which is definitely not ideal.

The best solution here would be to include <script src="src/prettify.js"></script> on the main page doing the Facebox ajax calls and just making sure that prettify is triggered on the AJAXed content after it's pulled in like so:

$(document).bind('beforeReveal.facebox', function() {
    prettyPrint();
});

Syntax highlight plugin without JS, pure CSS

1 Answers1