Blog
11OctCode Snippets
Posted on October 11, 2010 in Extensions bySome days ago I got a request from someone who was interested in my code snippets plugin. At that time I couldn't really offer the extension, it was simply too specific for my own website. Now that I've made some changes, I feel more comfortable with making it public.
So let's talk about my code highlighter, and why I like it so much. And actually the answer is really simple, I've create a code highlighter that completely fits my needs. Of course this was possible because I built it myself.
Features
- Code and syntax highlighting is done via GeSHi
- Better support for TypoScript (better than default GeSHi)
- Configurable code wrappers via TypoScript (stdWrap)
- Quick and easy selection due to the fact it's a 'totally new content element.
Screenshots
Just some TypoScript code 
- ## Page setup
- page {
- 10 = TEMPLATE
- 10 {
- ## Template setup
- template = FILE
- template.file = fileadmin/themes/szebi/html/template_main.html
- }
- }
## Page setup
page {
10 = TEMPLATE
10 {
## Template setup
template = FILE
template.file = fileadmin/themes/szebi/html/template_main.html
}
}
Installation
Simply download the extension at the bottom of this article, or export the most recent version from the repository on Forge. Install it in your TYPO3 backend by using the extension manager, include the static template and you're all done. All required files are then loaded automatically.
Additional Configuration
There are some settings you can change by TypoScript configuration. Here's a list of the things you can change:
TypoScript configuration options
- # This configurations is done in the 'setup' part of your TypoScript template
- plugin.tx_sdjcodesnippets_pi1 {
- # Enable code highlighting or not
- enable = 1
- # Show plain code as well
- showPlain = 1
- # Show the code title
- showTitle = 1
- # Wrapper for the highlighted code snippet
- code_stdWrap.wrap = |
- # Wrapper for the plain code snippet
- plain_stdWrap.wrap = <pre class="code" id="plain-888a7d04">|</pre>
- # Wrapper for the title
- title_stdWrap.wrap = <h5 class="code-header">| <a id="888a7d04" class="code-toggle" onclick="if(document.getElementById('plain-888a7d04').style.display == 'block') { document.getElementById('plain-888a7d04').style.display } else { } return false;" href="#" title="Toggle plain/highlighted code">!!<=:==////./></a></h5>
- # Wrapper for the whole output
- full_stdWrap.wrap = |
- }
# This configurations is done in the 'setup' part of your TypoScript template
plugin.tx_sdjcodesnippets_pi1 {
# Enable code highlighting or not
enable = 1
# Show plain code as well
showPlain = 1
# Show the code title
showTitle = 1
# Wrapper for the highlighted code snippet
code_stdWrap.wrap = |
# Wrapper for the plain code snippet
plain_stdWrap.wrap = <pre class="code" id="plain-888a7d04">|</pre>
# Wrapper for the title
title_stdWrap.wrap = <h5 class="code-header">| <a id="888a7d04" class="code-toggle" onclick="if(document.getElementById('plain-888a7d04').style.display == 'block') { document.getElementById('plain-888a7d04').style.display } else { } return false;" href="#" title="Toggle plain/highlighted code"><img style="float:right;" alt="" src="fileadmin/themes/szebi/img/page_white_code.png" /></a></h5>
# Wrapper for the whole output
full_stdWrap.wrap = |
}
The extension is provided with some stylesheets that will work under the default configuration. I didn't have time yet to provide stylesheets for all supported languages, since there are quite some. I'm also not 100% aware of what all these syntaxes should look like, so I prefer not to make any suggestions for that.
No manual
Not yet at least. I just had the time to modify the extension in such a way so it can actually be set available to the public. I will start working on a manual though, once that is done I will also post this extension to the TER. For now this post will have to do as 'manual'. ![;-]](fileadmin/themes/szebi/img/smile-blink.gif)
Contribute!
If you like the extension and you would like to add something to it, or you have some ideas to make it better. Feel free to let me know! The project is hosted on TYPO3's Forge, so feel free to post any suggestions or issues there. If you would like to contribute code to the extension as well, feel free to apply for it.
at 14:42
Nice feature
That's a nice one mate, GeSHi usually has a nice code highlighting. So it's a nice addition to the content elements.
One thing I saw in one of the screencaps (first one actually) is the use of the word 'langauge', did you by any change mean 'language'? :)
at 17:31
RE: Nice feature
Indeed, well spotted. At the time of writing that extension I was still using Eclipse PDT. It unfortunately does not note any spelling mistakes to you. Unlike PhpStorm ;-) I'll correct it, but it's a minor tweak so..
at 10:00
code highlighting plugin
Lovely!
I remember your post a few months ago about your switch to t3blog and the creation of your code highlighting plugin.
Thank you for sharing the code of your highlighting plugin.