To add a new theme to SyntaxHighlighter Evolved, you must first register the stylesheet with WordPress:
wp_register_style( 'syntaxhighlighter-theme-yourthemestub', content_url( 'path/to/your/theme.css' ), array( 'syntaxhighlighter-core' ), '1.2.3' );
Note we’re using wp_register_style()
and not wp_enqueue_style()
.
Parameters details:
- Change
yourthemestub
to something unique and simple. It doesn’t matter what as it’ll never be seen (you pick the title below), but remember it for below. - The path to your SyntaxHighlighter theme stylesheet relative to your
wp-content
folder. See thecontent_url()
documentation for more details. I would not store your stylesheet inside the plugin’s directory as it would be removed during a plugin upgrade. In your uploads folder or your WordPress theme folder is a decent place. - This tells WordPress that the standard plugin styling sheet is needed. It adds the basic structural formatting in that you’ll probably want. Your stylesheet will add the colors and styling.
- A version number. It doesn’t matter what you set it to, but change this if you edit the stylesheet. It’s for browser cache busting.
Now that the stylesheet has been registered with WordPress, we need to tell the plugin about the stylesheet using the syntaxhighlighter_themes
filter.
add_filter( 'syntaxhighlighter_themes', 'your_function_name_here' ); function your_function_name_here( $themes ) { $themes['yourthemestub'] = 'The Name Of Your Theme'; return $themes; }
You can drop that into a new plugin or your theme’s functions.php
file.
It would really have been great if I discovered this before I made my theme… but I must admit it was pretty fun discovering how to do it myself 😛
eyra
Pingback: AS3 Syntax Highlighting (with SyntaxHighlighter Evolved) | Course Vector
I’m having no luck with this. I added the code above to my WordPress plug-in that i used to get my custom Brush loaded but the Theme just never shows up in the “Color Theme” drop down in the “Settings.SyntaxHighlighter Settings” page.
I have the register code in the same method as the wp_register_script code used in the Brush example. I updated the code to say this:
wp_register_style( ‘syntaxhighlighter-theme-Modified’, plugins_url( ‘shThemeModified.css’, __FILE__ ), array(‘syntaxhighlighter-core’), ‘1.0.0’ );
Can you just go over this line?
$themes[‘yourthemestub’] = ‘The Name Of Your Theme’;
When you says “yourthemestub”, you you mean just provide the suffix you created for your theme or the full “syntaxhighlighter-theme-yourthemestub” title? Also, Is ‘The Name Of Your Theme’ just a description that should show up in the UI?
Thanks
Based on your
wp_register_style()
that you provided, you’d use this:Cool. Thanks. I ended up making the mistake in the add_filter(), I was appending my theme name to the first argument. After fixing this to the code below it started working. 😀
Hmmm… I was wrong, something still isn’t working. The Theme shows up in the drop down but after choosing it and pressing save it doesn’t show up selected if I refresh the page.
Ahhh… got it. So. I had some case-sensitivity evil, I ended up needing to make almost all the method name lower-case. Then I used this instead:
It seems to actually we working now. 🙂
Viper007Bond ,
I am having trouble with my CSS actually taking. I am trying to force a Font to be used for code and it doesn’t seem to be added. Other changed to the color do take but not the font. I was told that WordPress can sometimes try to be too smart an it dynamically creates the style sheets. I am not sure if that is the case here. I want to make “Courier New” the font, but in Firebug the .syntaxhighlighter class seems to be inheriting about 4 other fonts as well and “Courier New” is the 3rd font in the array of fonts.
Make sure you use
!important
on all of your CSS declarations so that your theme and more importantly the core SyntaxHighlighter CSS file (which controls everything but the colors) doesn’t override it.I’m trying to use this method to add a new stylesheet from my functions.php in my theme folder. It appears in the list at the settings page. After I save though, when I check the http calls, it gets shThemeDefault.css and not the CSS that I specified:
Everything works, the file is there, just for some reason, it’s not even trying to get that css file, it just goes to the default one.
How do you highlight an specific line?
Look at the bottom of the settings page and read about the “highlight” parameter or read http://en.support.wordpress.com/code/posting-source-code/
Sorry about this naive question, but how do I use a theme different from the default with SyntaxHighlighter? I checked the original plugin site (http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/) and the answer was to include this line , but (my naive question), where exactly do I have to insert this?
If I have a code like
where this should be placed?
Thanks in advance
About last post, the code did not show, but it was this
csharp
…
/csharp
Pingback: Wordpress Customization | The Devil In The Details
Is this still functional with WordPress 4.1? I am getting blank screens using this. Sorry but for technical reasons I can’t access the error logs.
Nice Blog Post
Black on black in the Charger I’m creepin’ Rub me the right way, you might get a genie B.o.B, black Houdini
Pingback: WordPress 「SyntaxHighlighter Evolved」プラグインのテーマの作成|有限会社 オブジェクト・ラボ
Perhaps I’m doing something wrong, but when I added the code to my plugin (I wrote a brush for Apex, Salesforce’s coding language), the block inspector doesn’t stay on the right side of the page anymore. It shifted to be below the editing block. My only need was to override the keyword css for use with my brush. Is there a way to accomplish this without having to write a new theme?
My assumption is that when you say “theme”, it’s for the syntaxhighligher evolved plugin and not the website theme.