Support » Plugin: Prismatic - Beautiful Syntax Highlight for Code Snippets » Support for Custom CSS
Support for Custom CSS
-
Hello team,
*Feature request*
Currently I am using Highlight.js in the prismatic which comes with it’s own set of CSS designs.
It would be good it you can add one more option for end user to be able to add their own CSS file or class instead of using the default ones
-
Thanks for the suggestion, I will see what I can do in a future version of the plugin. I appreciate your feedback.
Hey @golinuxcloud, I am working on the next plugin update. Can you clarify what sort of extra CSS/support is needed? For example, some of my plugins include an option to add custom CSS styles, which are then output on the front-end. Would something like that be useful?
-
This reply was modified 8 months, 1 week ago by
Jeff Starr.
Hello @specialk
Thank you for considering this request
I was hoping for something like
1. Give an option to avoid loading any CSS in the frontend by the plugin
2. Give a option to add custom CSSI know there are many other ways we can add Custom CSS but the advantage of having this in the plugin would be that if we are not using the plugin on some page then we can deactivate/disable the plugin for those pages and it will avoid loading any content from the plugin including custom CSS but if we use any other solution then even if the plugin was disabled on a page but the CSS would still load.
I hope this will help others as well where they want to modify any CSS styles of existing themes.
Ok thanks that explains it very well. I think something like this might be possible. A couple of questions/concerns:
1) From where should the custom CSS file be located? Like in a custom directory in your theme template? Just getting some ideas here..
2) About this:
“the advantage of having this in the plugin would be that if we are not using the plugin on some page then we can deactivate/disable the plugin for those pages and it will avoid loading any content from the plugin including custom CSS”
One of the best things about Prismatic is that it already does this out of the box. The plugin scripts and styles are loaded only pages where a highlighted code snippet exists.
With that in mind, if I added an option for custom CSS code, it would work the same way; the custom code would load only when a highlighted code snippet exists.
Let me know your thoughts.
>The plugin scripts and styles are loaded only pages where a highlighted code snippet exists.
Thanks, I was not aware of this.
Regarding point 1
My view was to add CSS in plain text rather than loading another CSS file. In you plugin there can be a section to add custom CSS by specifying the CSS class.That’s where I’m confused.. so if I add an option where you can add custom CSS code (plain text code snippet), would that suffice? This would be ideal imho.
Or are you asking if the plugin can add a custom class name, like
my-custom-class
, to all code snippet code tags? This would be less likely to be implemented.No, the first option as you said. Just a box to add custom CSS like many plugin does (similar to Simple CSS) or the way we add in “Additional CSS” section.
But what most plugin missing is they dump the collected CSS as it is inline to the page. It would be good to by default minify the provided CSS in this “box” and add as an inline CSS or may be create a temporary CSS file by the plugin with the custom CSS.
Hmm good point about minifying, but I think that should be left to the user to minify or optimize their own custom code (or not).
In any case, I will go ahead and add a “Custom CSS” option in the next plugin update. Thank you for your feedback, @golinuxcloud.
Just to follow up, the next version of Prismatic (3.2) includes a “Custom CSS” option, located under the new Advanced tab. Should be available later today or tomorrow.
Hello Jeff,
Thanks for adding the additional CSS section but I am unable to make it work.
I added the custom CSS required for highlight.js but I can’t find them getting loaded on frontend.Where can I check if the CSS is loaded? There are not added as inline.
Are they supposed to be loaded as separate CSS file?URL -> https://ivrjesh9ab-staging.onrocket.site/golang-time-format/
I am seeing this issue on default WordPress. Will resolve and push an update asap. Hopefully within the next couple of days. Thanks for reporting, Deepak.
This is resolved in version 3.2.2, available shortly. Please let me know if any further issues, thank you Deepak.
Thank you Jeff. Working Perfectly now.
-
This reply was modified 8 months, 1 week ago by
- The topic ‘Support for Custom CSS’ is closed to new replies.