rss2015-07-26 21:57:23 GMT
Blog upgrade: markdown syntax, Parsedown and Javascript code prettifier
>**Update 2015-07-27 16:11 +0000**
The php code has been modified.
What is going on here
--
Having integrated **Parsedown**, I now need to convert the formatting of old posts. I also adapted my javascript for a better interaction between **markdown** and **Javascript code prettifier**.
Links about stuff
--
* [Markdown](http://daringfireball.net/projects/markdown/)
* [CommonMark](http://commonmark.org/)
* [Parsedown](https://github.com/erusev/parsedown)
* [Javascript code prettifier](https://github.com/google/code-prettify)
This is the code of my Parsedown extension for text alignment:
-
````php
// extend with text align "|lcrj|" or "%lcrj%"
// this is block level, it will work over multiple lines
// |l| "this will be left aligned"
// |c| "this will be centered"
// |r| "this will be right aligned"
// |j| "this will be justified"
class ParsedownCustom extends Parsedown {
private $pattern_Aligner = '/^([\|%])([lcrj])\\1(.*)/';
function __construct() {
$this->BlockTypes['|'][] = 'Aligner';
$this->BlockTypes['%'][] = 'Aligner';
}
// text alignment
// based on Quote
protected function BlockAligner($Line) {
if(preg_match($this->pattern_Aligner, $Line['text'], $matches)) {
$Block = array(
'char0' => $Line['text'][0],
'char1' => $Line['text'][1],
'element' => array(
'name' => 'div',
'handler' => 'lines',
'text' => (array) $matches[3],
'attributes' => array(
'class' => 'markdown-body-custom-ta'.$matches[2],
),
),
);
return $Block;
}
}
protected function BlockAlignerContinue($Line, array $Block) {
if(
$Line['text'][0] === $Block['char0']
&& $Line['text'][1] === $Block['char1']
&& preg_match($this->pattern_Aligner, $Line['text'], $matches)
) {
if(isset($Block['interrupted'])) {
$Block['element']['text'] []= '';
unset($Block['interrupted']);
}
$Block['element']['text'] []= $matches[3];
return $Block;
}
if( ! isset($Block['interrupted'])) {
$Block['element']['text'] []= $Line['text'];
return $Block;
}
}
}
````
The javascript
--
````js
/******************************************************************************/
window.addEventListener('DOMContentLoaded', function pageReady(){
// add prettyprint to code blocks
var nodes = document.querySelectorAll("pre > code");
for(node of nodes) {
// lang hint
for(cls of node.classList) {
var m = cls.match(/language-(\w+)/);
if(m) {
node.classList.add("lang-"+m[1]);
}
}
node.classList.add("prettyprint");
node.classList.add("linenums");
}
// run prettyprint
prettyPrint();
document.removeEventListener("DOMContentLoaded", pageReady, false);
}, false);
````
In the meantime, here is a big kitty to look at:
--
Done.