Using Markdown and SHJS with PHP
Added on 28th Sep, 2009 by Aravinda, Tags: php, markdown, javascript
In this article we will discuss
- Markdown
- Markdown PHP
- SHJS - Syntax highlighter using JS
- How To Use?
Markdown
Markdown is a wiki like syntax standard, to have highly readable content.
From Markdown website
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
For example
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
** Bold **
* Italic *
> blockquote
`single line code`
# This is pre, 4 tab space
# in the beginning
# python example
import markdown
# shell script
for $i in `ls`
do
echo $i
done
# PHP
<?php
echo "Hi";
?>
Adding Image as reference, reference defined in bottom of page
![Alt Text][100]
Adding inline image
[Click here](http://localhost)
[100]: a.jpg "Sumne"
will be converted to
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p><strong> Bold </strong>
<em> Italic </em></p>
<blockquote>
<p>blockquote</p>
</blockquote>
<p><code>single line code</code></p>
<pre><code># This is pre, 4 tab space
# in the beginning
# python example
import markdown
# shell script
for $i in `ls`
do
echo $i
done
# PHP
<?php
echo "Hi";
?>
</code></pre>
<p>Adding Image as reference, reference defined in bottom of page</p>
<p><img alt="Alt Text" src="a.jpg" title="Sumne" /></p>
<p>Adding inline image</p>
<p><img alt="Alt Text" src="a.jpg" /></p>
<p><a href="http://localhost">Click here</a></p>
More details about markdown is here
Markdown PHP
PHP implementation of markdown is available here. We can store the content in database in the markdown format itself, While displaying to user we can convert to HTML using the Markdown PHP library.
<?php
require_once 'markdown.php';
$text = '
# Heading 1
Sample Paragraph
';
echo Markdown($text);
?>
Custom style sheets can be applied to required elements like h1, h2, p, blockquote, pre, code etc. This will separate content from html elements and styles, hence content will be highly readable.
User can use any editors which highlights the markdown syntax(I use Emacs) or any plain text editor.
SHJS - Syntax highlighter using JS
It will be good if we able to highlight the code inside pre element, I found a Javascript utility SHJS(Syntax Highlighter with JavaScript), which has very good features and multiple themes support. Read the documentation about SHJS here.
SHJS library requires class to be defined in pre tag like <pre class="sh_php"> for PHP code, but it is not possible to add class in markdown syntax, so we will write an PHP function to add the class to each pre element. We need to add #!sh_php(php is used as example, that will change depending on the language) in the markdown text whereever highlighting is required.
#!sh_php
<?php
# This is an example text file to show how to add language
# header for syntax highlight
echo 'Hello World';
?>
PHP function to replace #!sh_php to <pre class="sh_php"> is
function addClassToPre($text){
// Add respective class to pre tag
$op = preg_replace('/<pre><code>#!([^\\n]+)/',
'<pre class=\'$1\'><code>',
$text);
return $op;
}
If we load all the syntax highlight JavaScript files then it affects loading time, so we will add only required JavaScript files for syntax highlight based on the languages used in the content.
function addRespectiveJsFiles($text){
preg_match_all('/<pre><code>#!([^\\n]+)/',Markdown($text), $result);
$jsFiles = array_unique($result[0]);
foreach($jsFiles as $jsFile){
$fileName = str_replace('<pre><code>#!','',$jsFile). '.js';
if(file_exists('lang/'.$fileName)){
echo '<script type="text/javascript" src="lang/'.$fileName .'"></script>';
}
}
}
How To Use?
<script type="text/javascript" src="sh_main.js"></script>
<link type="text/css" rel="stylesheet" href="css/sh_emacs.css">
<?php
require_once 'markdown.php';
# Get File content which has text in markdown format
$rawContent = file_get_contents("sample.txt");
# Add the respective language files
addRespectiveJsFiles($rawContent);
echo codeHighlight(markdown($rawContent));
?>
<script>
window.onload = function(){
sh_highlightDocument();
};
</script>
Btw, I use SHJS emacs theme for syntax highlight in my website [
]
