Forums

Here is how to add code and coloring syntax in TinyMCE

Permalink
Hi @ all after many test, because i really like geshi, i finally found an alternative. the sipliest one because as we said "the better is the enemy of the good".

First excuse my poor english.

Then,
To add the code insertion and the syntax cooloring in concrete5 with TinyMCE you'll ned two tools:

One plugin for TinyMCE
One syntax coloring system


For the plugin i choose "syntaxhl" witch has a simple target, provide the right syntax for the syntax coloring java code.

You'll find it here:
http://github.com/RichGuk/syntaxhl/tree/master...

To get it simply clic on the button [img]http://www.concrete5.fr/images/download_button.png[/img] in the upper side of the page.

For the syntax coloration i choose "syntaxhighlighter". As you can see the two are linked. I usually prefer geshi but for some xHTML compatibility reason i went to the easiest solution.

To get it it's here:
http://code.google.com/p/syntaxhighlighter/...

Now it's so simple:

Uncompress the two archives
rename the plugin folder in [b]syntaxhl[/b] and then upload it in /concrete/js/tiny_mce_309/plugins/

Upload the files directly in your template folder:

/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css
/dp.SyntaxHighlighter/Uncompressed/shBrushCpp.js
/dp.SyntaxHighlighter/Uncompressed/shBrushCSharp.js
/dp.SyntaxHighlighter/Uncompressed/shBrushCss.js
/dp.SyntaxHighlighter/Uncompressed/shBrushDelphi.js
/dp.SyntaxHighlighter/Uncompressed/shBrushJava.js
/dp.SyntaxHighlighter/Uncompressed/shBrushJScript.js
/dp.SyntaxHighlighter/Uncompressed/shBrushPhp.js
/dp.SyntaxHighlighter/Uncompressed/shBrushPython.js
/dp.SyntaxHighlighter/Uncompressed/shBrushRuby.js
/dp.SyntaxHighlighter/Uncompressed/shBrushSql.js
/dp.SyntaxHighlighter/Uncompressed/shBrushVb.js
/dp.SyntaxHighlighter/Uncompressed/shBrushXml.js
/dp.SyntaxHighlighter/Uncompressed/shCore.js

to have a result like:
/themes/YOUR_TEMPLATE/SyntaxHighlighter.css

I know it's not so clean but it's work great. :s

After edit your file:

/themes/YOUR_TEMPLATE/elements/header.php

search:
<style type="text/css">@import "<?php echo $this->getThemePath()?>/main.css";</style>


add after on a new line:
<style type="text/css">@import "<?php echo $this->getThemePath()?>/SyntaxHighlighter.css";</style>


edit your file:

/themes/YOUR_TEMPLATE/elements/footer.php

search:
</body>


add just BEFORE:
<script src="<?php echo $this->getThemePath()?>/shCore.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushCpp.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushCSharp.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushCss.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushDelphi.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushJava.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushJScript.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushPhp.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushPython.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushRuby.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushSql.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushVb.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/shBrushXml.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
Viewing 15 lines of 16 lines. View entire code block.


Now everything is here, ready to work you just have to edit your file:
/concrete/blocks/content/editor_init.php

add the plugin on the line:

search:
plugins: "inlinepopups,spellchecker,safari,advlink


before (at the end of the line):
",


add:
,syntaxhl


and a new line add:
extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]",
   remove_linebreaks : false,


search: 
theme_concrete_buttons2_add : "spellchecker,


before (at the end of the line):
",


add:
, syntaxhl


It should ppear like:

tinyMCE.init({
   mode : "textareas",
   editor_selector : "advancedEditor",
   theme : "concrete",
   language : "fr",
   width: "580px",
   height: "380px",
   plugins: "inlinepopups,spellchecker,safari,advlink,syntaxhl",
   inlinepopups_skin : "concreteMCE",
   theme_concrete_buttons2_add : "spellchecker, syntaxhl",
   spellchecker_languages : "+French=fr",
   extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]",
   remove_linebreaks : false,
   relative_urls : false,
   convert_urls: false,
Viewing 15 lines of 17 lines. View entire code block.



!!!! CAUTION !!!!

A: The syntax coloring appear on the page, NOT in the editor !!

B: !!! When you're editing your content the editor is working strangely. Your code could disappear, or its cutting your article, and so...
keep and save of the HTML code source of your article for editing later.

C: The code in your article is not editable instead of in the HTML source code !!

Now you're free to edit the CSS (SyntaxHighlighter.css) as you need to stick to your website design.

If someone find a better solution, i'll read it carrefully :)

Hope this is could help you.

on exemple of the result with modified CSS:
http://cms.concrete5.fr/doc/personnaliser-c5/creer-une-page-type/...
cali
 
abulka replied on at Permalink Reply
abulka
Having a facility to publish programming code is a great idea. Is there an updated link re how it all looks at the end - the one you give above (at the bottom) doesn't work anymore.

I want something that gives me wordpress style scrolling code areas e.g.
http://rubenlaguna.com/wp/2008/07/11/migrating-blinklist-bookmarks-...

A better guest commenting facility would be good too - would bring things up to wordpress standards... !!
cali replied on at Permalink Reply
cali
yes you're right. i have updated the link the URLs structure has change on the c5.fr web site.
excuse me.