prettify styles for code blocks in bootstrap theme
Permalink
Hi,
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:
<dasmaschine.net>
<http://demo.stanleyhlng.com/prettify-js/?id=bootstrap-light>
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.
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:
<dasmaschine.net>
<http://demo.stanleyhlng.com/prettify-js/?id=bootstrap-light>
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
/var/www/dasmaschine/html/
In side that directory I created a custom files folder where I placed the .css file
/var/www/dasmaschine/html/customfiles/
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.
http://www.concrete5.org/marketplace/addons/syntax-anywhere/...
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)