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
– Marc B, Commented Nov 23, 2012 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
– Cholesterol, Commented Jul 11, 2013 at 18:41

Community · Accepted Answer · 2017-05-23 10:31:45Z

1

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();
});

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Oct 10, 2013 at 22:37

shshaw

3,2632 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Syntax highlight plugin without JS, pure CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related