Whilst working on an update to snippet manager, I was looking for the easiest way to introduce syntax highlighting and came up with one solution. I did not want to write syntax colouring procedures entirely in ActionScript, this seems like a bad idea to me as there are existing highlighting libraries available in JavaScript. So, I decided to try to encorporate an existing JavaScript library into a Flex application for AIR.
In this tutorial, I will show you a basic example of how to use the SHJS (Syntax Highlighting in JavaScript) library inside a Flex/AIR application.
For simplicity, In this example will use only the PHP Syntax Highlighting filter, but SHJS supports many more (Bison, C/C++, C#, ChangeLog, CSS, Diff, Flex, HTML, Java, JavaScript, LaTeX, Log files, M4, Makefile, Oracle SQL, Pascal, Perl, PHP, Prolog, Python, Ruby, Shell, SQL, Tcl, XML)
In order to run this example, there are some files from the SHJS library required, these are:
- sh_style.min.css
- sh_main.min.js
- sh_php.min.js
(You can grab these files from the SHJS sourceforge website – or download them in the example zip file below)
1. Create the AIR application file. highlight-app.xml
<?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0"> <id>highlight.syntax</id> <version>1.0</version> <filename>highlight</filename> <initialWindow> <content>highlight.swf</content> <visible>true</visible> <width>650</width> <height>350</height> </initialWindow> </application>
2. Create the Flex application file. highlight.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:highlight="*"
showFlexChrome="true"
pageTitle="Syntax Highlight"
layout="absolute" title="Syntax Highlight"
initialize="init();">
<mx:Script>
<![CDATA[
private function init():void {
textZ.text = "<?php\n for($i=0;$i<100;$i++){\n echo 'line '+$i+'<br />';\n }\n?>";
}
private function syntaxColoring():void {
htmlZ.htmlLoader.window.highlightString(textZ.text,'php');
htmlZ.htmlLoader.window.sh_highlightDocument();
}
]]>
</mx:Script>
<mx:Panel x="10" y="10" width="252" height="100%"
layout="absolute" title="Enter Code Below">
<mx:TextArea id="textZ" color="#000000"
fontSize="11" fontFamily="Courier New"
editable="true" wordWrap="true"
width="100%" height="100%"/>
</mx:Panel>
<mx:Panel x="375" y="10" width="252" height="100%"
layout="absolute" title="Highlighted Code">
<mx:HTML
id="htmlZ"
location="syntax.htm"
enabled="true"
paddingLeft="4"
paddingRight="4"
width="100%" height="100%"/>
</mx:Panel>
<mx:Button x="270" y="65" label="Highlight >>"
click="syntaxColoring()"/>
</mx:WindowedApplication>
3. Create the syntax highlighting html file. syntax.htm
<link rel="stylesheet" href="sh/sh_style.min.css">
<script src="sh/sh_main.min.js"></script>
<script src="sh/sh_php.min.js"></script>
<script>
function highlightString(st,lang) {
document.getElementById('sourcecode').className = 'sh_'+lang;
document.getElementById('sourcecode').innerText = st;
}
</script>
<pre id="sourcecode"></pre>
Syntax Highlighting Example Flex / AIR
Download all required files in this example: flex_syntax_highlight_example.zip
Tags: air, Flex, javascript, Syntax Highlighting
