Browse files

Added experimental support for <figure> and <figcaption>, updates to …

…demo site
  • Loading branch information...
1 parent 34b35a1 commit 0dbbfc04d32c6fbb6a4e5e29074ea2cffcebab11 @egil committed Jul 13, 2011
View
28 README.markdown
@@ -1,3 +1,4 @@
+
# PHP Markdown Extra Extended
An fork of the [PHP Markdown (Extra) project](http://michelf.com/projects/php-markdown/) (<abbr title="PHP Markdown (Extra)">PME</abbr>), extended with extra syntax, especially focused on adding support for more HTML attributes to outputted HTML, and for outputting HTML5.
@@ -81,6 +82,33 @@ Both will output the following HTML:
</code></pre>
```
+### Support for *figure* and *figcaption* tags
+There is now experimental support for the the HTML5 tags *[figure](http://dev.w3.org/html5/markup/figure.html)* and *[figcaption](http://dev.w3.org/html5/markup/figcaption.html)*.
+
+A *figure* is a block level element and is created by wrapping some other content in three or more equal (=) signs.
+
+A optional *figure caption* can be added to either the top of the figure or the bottom at the figure, right after the equal signs, wrapped in [ and ] signs.
+
+#### Examples
+This example shows a *figure* without a caption:
+```markdown
+===
+![](img/reference.png)
+===
+```
+This example shows a *figure* with a caption added before the content:
+```markdown
+=== [A **happy face** is good for web developers]
+![](img/reference.png)
+===
+```
+This example shows a *figure* with a caption added after the content:
+```markdown
+===
+![](img/reference.png)
+===
+``` [A **happy face** is good for web developers]
+
## Usage
You need both the *markdown.php* and the *markdown_extended.php* files, but only needs to include *markdown_extended.php*.
View
5 demo/css/style.css
@@ -204,7 +204,10 @@ button {
margin-top: 10px;
}
-
+.feedback {
+ padding: 0px 10px;
+ line-height: 1.5;
+}
View
BIN demo/img/reference.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
83 demo/index.html
@@ -1,42 +1,43 @@
-<!doctype html>
-<html lang="en" class="no-js">
-<head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>PHP Markdown Extra Extended Test Page</title>
- <meta name="author" content="Egil Hansen - http://egilhansen.com">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="css/style.css?v=4">
- <link rel="stylesheet" href="css/libs/sunburst.css" />
-</head>
-<body>
- <div id="container">
- <header>
- <h1>PHP Markdown Extra Extended Test Page</h1>
- </header>
- <div class="column">
- <h2>Markdown Input</h2>
- <form>
- <div id="input" class="content-area"><textarea name="markdown" tabindex="1"></textarea></div>
- <div>
- <button type="submit">Submit</button>
- <button type="reset">Reset</button>
- </div>
- </form>
- </div>
- <div class="column">
- <h2>Markdown Output</h2>
- <div id="result" class="content-area"></div>
- </div>
- <div class="column">
- <h2>HTML Output</h2>
- <pre class="content-area prettyprint"><code id="rawoutput" class="language-html"></code></pre>
- </div>
- </div>
- <script src="/demo/js/libs/jquery-1.6.2.min.js"></script>
- <script>window.jQuery || document.write("<script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'>\x3C/script>")</script>
- <script src="/demo/js/libs/jquery.cookie.js"></script>
- <script src="/demo/js/libs/prettify.js"></script>
- <script src="/demo/js/script.js"></script>
-
+<!doctype html>
+<html lang="en" class="no-js">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>PHP Markdown Extra Extended Test Page</title>
+ <meta name="author" content="Egil Hansen - http://egilhansen.com">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="css/style.css?v=4">
+ <link rel="stylesheet" href="css/libs/sunburst.css" />
+</head>
+<body>
+ <div id="container">
+ <header>
+ <h1>PHP Markdown Extra Extended Test Page</h1>
+ </header>
+ <div class="column">
+ <h2>Markdown Input</h2>
+ <form>
+ <div id="input" class="content-area"><textarea name="markdown" tabindex="1"></textarea></div>
+ <div>
+ <button type="submit">Submit</button>
+ <button type="reset">Reset</button>
+ <span class="feedback" id="submit-count">#0</span> @ <time class="feedback" id="last-submit"></time>
+ </div>
+ </form>
+ </div>
+ <div class="column">
+ <h2>Markdown Output</h2>
+ <div id="result" class="content-area"></div>
+ </div>
+ <div class="column">
+ <h2>HTML Output</h2>
+ <pre class="content-area prettyprint"><code id="rawoutput" class="language-html"></code></pre>
+ </div>
+ </div>
+ <script src="js/libs/jquery-1.6.2.min.js"></script>
+ <script src="js/libs/jquery.cookie.js"></script>
+ <script src="js/libs/prettify.js"></script>
+ <script src="js/script.js"></script>
+
+</body>
</html>
View
11 demo/js/script.js
@@ -10,7 +10,8 @@ $(function(){
// load data from cookie
$('textarea').val($.cookie('pmee_testdata')).focus();
-
+
+ $('#submit-count').data('count', 0);
// bindings
$(window).resize(resizeBoxes);
@@ -22,12 +23,15 @@ $(function(){
// post to server
$('form').submit(function(){
var testdata = $('textarea').val();
+
// some processing colors and UI niceness
$('#result').html('').css('background-color', '#EBF765');
$('#rawoutput').html('');
$('button[type=submit]').attr('disabled', 'disabled');
+
// save testdata in cookie for next reload
- $.cookie('pmee_testdata', testdata);
+ $.cookie('pmee_testdata', testdata, { expires: 7, path: '/demo/' });
+
// submit and wait for markup
$.ajax({
url: '/demo/service.php',
@@ -38,6 +42,9 @@ $(function(){
// update UI
$('#result').html(res).css('background-color', 'transparent');
$('#rawoutput').text(res);
+ $('#submit-count').text('#' + ($('#submit-count').data('count') + 1));
+ $('#submit-count').data('count', $('#submit-count').data('count') + 1);
+ $('#last-submit').text(new Date().toLocaleString());
prettyPrint();
$('textarea').focus();
$('button[type=submit]').removeAttr('disabled');
View
0 notes/class-syntax-tests.txt → demo/notes/class-syntax-tests.txt
File renamed without changes.
View
30 demo/notes/figure-syntax-test.txt
@@ -0,0 +1,30 @@
+Tail pork loin t-bone
+=====================
+
+===[Flank meatloaf sirloin shank `tenderloin` ham cow **swine** jowl boudin.]
+> Tri-tip brisket chicken short ribs beef swine. Short loin swine andouille tenderloin, pork tri-tip chuck meatball ball tip hamburger shankle pork chop bacon. Shoulder beef hamburger chicken bresaola.
+===
+
+===[Flank meatloaf sirloin shank `tenderloin` ham cow **swine** jowl boudin.]
+![](img/reference.png)
+
+> Tri-tip brisket chicken short ribs beef swine. Short loin swine andouille tenderloin, pork tri-tip chuck meatball ball tip hamburger shankle pork chop bacon. Shoulder beef hamburger chicken bresaola.
+===[Flank meatloaf sirloin shank `tenderloin` ham cow **swine** jowl boudin.]
+
+===
+![](img/reference.png)
+=== [Flank meatloaf sirloin shank `tenderloin` ham cow **swine** jowl boudin.]
+
+asdfa sdf asdf asdf asdf asdf asfdasdf asdf a
+
+===
+![](img/reference.png)
+===
+
+===
+```
+<figure>
+ <p><img src="img/reference.png" alt="" /></p>
+</figure>
+```
+===
View
63 markdown_extended.php
@@ -8,11 +8,17 @@ function MarkdownExtended($text, $default_claases = array()){
}
class MarkdownExtraExtended_Parser extends MarkdownExtra_Parser {
-
- private $default_classes;
-
+ # Tags that are always treated as block tags:
+ var $block_tags_re = 'figure|figcaption|p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|address|form|fieldset|iframe|hr|legend';
+ var $default_classes;
+
function MarkdownExtraExtended_Parser($default_classes = array()) {
- $default_classes = $default_classes;
+ $default_classes = $default_classes;
+
+ $this->block_gamut += array(
+ "doFencedFigures" => 7,
+ );
+
parent::MarkdownExtra_Parser();
}
@@ -129,5 +135,54 @@ function _doFencedCodeBlocks_callback($matches) {
return "\n\n".$this->hashBlock($cb)."\n\n";
}
+ function doFencedFigures($text){
+ $text = preg_replace_callback('{
+ (?:\n|\A)
+ # 1: Opening marker
+ (
+ ={3,} # Marker: equal sign.
+ )
+
+ [ ]?(?:\[([^\]]+)\])?[ ]* \n # Whitespace and newline following marker.
+
+ # 3: Content
+ (
+ (?>
+ (?!\1 [ ]?(?:\[([^\]]+)\])?[ ]* \n) # Not a closing marker.
+ .*\n+
+ )+
+ )
+
+ # Closing marker.
+ \1 [ ]?(?:\[([^\]]+)\])?[ ]* \n
+ }xm', array(&$this, '_doFencedFigures_callback'), $text);
+
+ return $text;
+ }
+
+ function _doFencedFigures_callback($matches) {
+ # get figcaption
+ $topcaption = empty($matches[2]) ? null : $this->runBlockGamut($matches[2]);
+ $bottomcaption = empty($matches[4]) ? null : $this->runBlockGamut($matches[4]);
+ $figure = $matches[3];
+ $figure = $this->runBlockGamut($figure); # recurse
+
+ $figure = preg_replace('/^/m', " ", $figure);
+ # These leading spaces cause problem with <pre> content,
+ # so we need to fix that - reuse blockqoute code to handle this:
+ $figure = preg_replace_callback('{(\s*<pre>.+?</pre>)}sx',
+ array(&$this, '_doBlockQuotes_callback2'), $figure);
+
+ $res = "<figure>";
+ if(!empty($topcaption)){
+ $res .= "\n<figcaption>$topcaption</figcaption>";
+ }
+ $res .= "\n$figure\n";
+ if(!empty($bottomcaption) && empty($topcaption)){
+ $res .= "<figcaption>$bottomcaption</figcaption>";
+ }
+ $res .= "</figure>";
+ return "\n". $this->hashBlock($res)."\n\n";
+ }
}
?>

0 comments on commit 0dbbfc0

Please sign in to comment.