prettify styles for code blocks in bootstrap theme


This is my first post in the forums as I am new to concrete5. For the most part ive managed to get everything installed without a problem (running nginx and php-fpm on a CentOS vps) but am still quite a noob with respect to CMS frameworks more specifically C5.

I purchased the Bootstrap3 theme, and am setting up a website where I will have lots of tutorials and resources on SysAdmin related topics. That being said I need very little customization as the Bootstrap theme provides just about everything I need. However, I am going to be posting alot of code blocks, and therefore wanted a slightly more robust styling scheme for my <pre> and <code> blocks. The bootstrap theme loads prettify.js by default, and I found a set of nice style sheets which correspond with that script. Below is my website and the link to the home page where the style sheets are provided:


If I am interpreting it correctly, all i need to do at this point is link the style sheet of interest in my required_header field and I should be able to style my code correctly. Since I am still getting familiar with the C5 directory, i was under the impression that customized .css and .js scripts should not be loaded into the 'core' directory because they can be deleted during upgrades. So my questions are:

I am running my own vps so I access everything via SSH shell terminal. My site root is

In side that directory I created a custom files folder where I placed the .css file

I then went to my dashboard, and attempted to add the link via the Bootstrap Theme/Settings menu in the additional header code field. I also added a google analytics snippet in that same area - the analytics snippet works correctly, but the .css files returns a 304 not found error.

1. what directory do I place my custom prettify.css file with respect to my entire public web directory, could you please specify what directory this would be at the top most level - I see many redundancies in the concrete5 directory (which I know has a purpose).

2. Is there a way that I can add this file without doing it in the dashboard, so that it becomes imbued into my purchased theme - keep in mind this will be basically the only customized addition i will be needing to add.

3. This is not necessary, but would be an bonus, is there a way that I can have the various code classes/languages/syntaxes appear as options in my WYSWIG mce editor. Or is it best that I just go into HTML mode and paste the block and classes manually .. i.e...
<code class="example prettify class">

Thank you for any input - sometimes no matter how much you read the documentation you just need an expert to set the information straight in your head.

View Replies:
JohntheFish replied on at Permalink Reply
My Syntax Anywhere block can already do that for you

It highlights using either the syntax highlighter in @remo's code/syntax block or the google syntax highlighter.

(Other highlighters can be integrated using a plugin system)