├── .gitignore
├── Markdown.php
├── MarkdownTest.md
├── README.md
├── composer.json
└── index.php


/.gitignore:
--------------------------------------------------------------------------------
1 | composer.lock
2 | vendor


--------------------------------------------------------------------------------
/Markdown.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Bogardo;
  4 | 
  5 | use \cebe\markdown\GithubMarkdown;
  6 | 
  7 | class Markdown extends GithubMarkdown
  8 | {
  9 | 	/**
 10 | 	 * Default Codepen theme ID
 11 | 	 */
 12 | 	protected $theme;
 13 | 
 14 | 	public function __construct($theme = false)
 15 | 	{
 16 | 
 17 | 		/**
 18 | 		 * Set the default theme ID
 19 | 		 */
 20 | 		$this->theme = $theme;
 21 | 
 22 | 	}
 23 | 
 24 | 	/**
 25 | 	* Codepen identifier
 26 | 	*/
 27 | 	protected function identifyLine($lines, $current)
 28 | 	{
 29 | 		if (strncmp($lines[$current], 'codepen[', 8) === 0) {
 30 | 			return 'Codepen';
 31 | 		}
 32 | 
 33 | 		return parent::identifyLine($lines, $current);
 34 | 	}
 35 | 
 36 | 	/**
 37 | 	 * Codepen Consumer
 38 | 	 * 
 39 | 	 * @param  array $lines 	All lines in document
 40 | 	 * @param  int $current 	Current line
 41 | 	 * @return array 			An array of a block and linenumber to continue consuming
 42 | 	 */
 43 | 	protected function consumeCodepen($lines, $current)
 44 | 	{
 45 | 		$block = [
 46 | 			'type' 		=> 'Codepen',
 47 | 			'content' 	=> [],
 48 | 			'pen' 		=> false,
 49 | 			'height' 	=> false,
 50 | 			'tab' 		=> false,
 51 | 			'theme' 	=> false
 52 | 		];
 53 | 
 54 | 		$line 	 = rtrim($lines[$current]);
 55 | 		$matches = false;
 56 | 
 57 | 		/**
 58 | 		 * Regular expression that matches:
 59 | 		 *  - A string starting with "codepen"
 60 | 		 *  The pen identifier    - A string of alpha characters minimum of 4 characters and maximum of 8, between brackets.
 61 | 		 *  The height of the pen - An integer with a minimum length of 2 and maximum of 5, between brackets.
 62 | 		 *  The active tab        - (optional) A string equal to one of four options; 'html', 'css', 'js' or 'result', between brackets.
 63 | 		 *  The theme for the pen - (optional) An integer with a minimum length of 1 and a maximum of 6, between brackets.
 64 | 		 */
 65 | 		$regex = "/^codepen(?:\[([A-z]{4,8})\])(?:\[(\d{2,5})\])(?:\[(html|css|js|result)\])?(?:\[(\d{1,6})\])?$/";
 66 | 		preg_match($regex, $line, $matches);
 67 | 		  	
 68 | 		if (count($matches) < 3) return [$block, $current++];
 69 | 
 70 | 		$block['pen'] = $matches[1];
 71 | 		$block['height'] = $matches[2];
 72 | 
 73 | 		if (isset($matches[3])) {
 74 | 			$block['tab']	= $matches[3];
 75 | 		}
 76 | 		if (isset($matches[4])) {
 77 | 			$block['theme']	= $matches[4];
 78 | 		}
 79 | 		
 80 | 		return [$block, $current++];
 81 | 	}
 82 | 
 83 | 	/**
 84 | 	 * Codepen Renderer
 85 | 	 * 
 86 | 	 * @param  array $block
 87 | 	 * @return string 			HTML that should be rendered
 88 | 	 */
 89 | 	protected function renderCodepen($block)
 90 | 	{
 91 | 		if (!isset($block['pen'])) return false;
 92 | 
 93 | 		$pen 	= $block['pen'];
 94 | 		$height = $block['height'];
 95 | 		$tab 	= 'result';
 96 | 		$theme 	= $this->theme;
 97 | 
 98 | 		if ($block['tab']) {
 99 | 			$tab = $block['tab'];
100 | 		}
101 | 
102 | 		if ($block['theme']) {
103 | 			$theme 	= $block['theme'];
104 | 		}
105 | 
106 | 		return "<p data-height='{$height}' data-slug-hash='{$pen}' data-default-tab='{$tab}' data-theme-id='{$theme}' class='codepen'></p>";
107 | 	}	
108 | }


--------------------------------------------------------------------------------
/MarkdownTest.md:
--------------------------------------------------------------------------------
  1 | GitHub Flavored Markdown
  2 | ================================
  3 | 
  4 | *View the [source of this content](http://github.github.com/github-flavored-markdown/sample_content.html).*
  5 | 
  6 | Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:
  7 | 
  8 | Roses are red
  9 | Violets are blue
 10 | 
 11 | The next paragraph has the same phrases, but now they are separated by two spaces and a newline character:
 12 | 
 13 | Roses are red  
 14 | Violets are blue
 15 | 
 16 | Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.
 17 | 
 18 | Codepen example
 19 | --------------
 20 | 
 21 | codepen[vclLe][340]
 22 | 
 23 | 
 24 | A bit of the GitHub spice
 25 | -------------------------
 26 | 
 27 | In addition to the changes in the previous section, certain references are auto-linked:
 28 | 
 29 | * SHA: be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
 30 | * User@SHA ref: mojombo@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
 31 | * User/Project@SHA: mojombo/god@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2
 32 | * \#Num: #1
 33 | * User/#Num: mojombo#1
 34 | * User/Project#Num: mojombo/god#1
 35 | 
 36 | These are dangerous goodies though, and we need to make sure email addresses don't get mangled:
 37 | 
 38 | My email addy is tom@github.com.
 39 | 
 40 | Math is hard, let's go shopping
 41 | -------------------------------
 42 | 
 43 | In first grade I learned that 5 > 3 and 2 < 7. Maybe some arrows. 1 -> 2 -> 3. 9 <- 8 <- 7.
 44 | 
 45 | Triangles man! a^2 + b^2 = c^2
 46 | 
 47 | We all like making lists
 48 | ------------------------
 49 | 
 50 | The above header should be an H2 tag. Now, for a list of fruits:
 51 | 
 52 | * Red Apples
 53 | * Purple Grapes
 54 | * Green Kiwifruits
 55 | 
 56 | Let's get crazy:
 57 | 
 58 | 1.  This is a list item with two paragraphs. Lorem ipsum dolor
 59 |     sit amet, consectetuer adipiscing elit. Aliquam hendrerit
 60 |     mi posuere lectus.
 61 | 
 62 |     Vestibulum enim wisi, viverra nec, fringilla in, laoreet
 63 |     vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
 64 |     sit amet velit.
 65 | 
 66 | 2.  Suspendisse id sem consectetuer libero luctus adipiscing.
 67 | 
 68 | What about some code **in** a list? That's insane, right?
 69 | 
 70 | 1. In Ruby you can map like this:
 71 | 
 72 |         ['a', 'b'].map { |x| x.uppercase }
 73 | 
 74 | 2. In Rails, you can do a shortcut:
 75 | 
 76 |         ['a', 'b'].map(&:uppercase)
 77 | 
 78 | Some people seem to like definition lists
 79 | 
 80 | <dl>
 81 |   <dt>Lower cost</dt>
 82 |   <dd>The new version of this product costs significantly less than the previous one!</dd>
 83 |   <dt>Easier to use</dt>
 84 |   <dd>We've changed the product so that it's much easier to use!</dd>
 85 | </dl>
 86 | 
 87 | I am a robot
 88 | ------------
 89 | 
 90 | Maybe you want to print `robot` to the console 1000 times. Why not?
 91 | 
 92 |     def robot_invasion
 93 |       puts("robot " * 1000)
 94 |     end
 95 | 
 96 | You see, that was formatted as code because it's been indented by four spaces.
 97 | 
 98 | How about we throw some angle braces and ampersands in there?
 99 | 
100 |     <div class="footer">
101 |         &copy; 2004 Foo Corporation
102 |     </div>
103 | 
104 | Set in stone
105 | ------------
106 | 
107 | Preformatted blocks are useful for ASCII art:
108 | 
109 | <pre>
110 |              ,-. 
111 |     ,     ,-.   ,-. 
112 |    / \   (   )-(   ) 
113 |    \ |  ,.>-(   )-< 
114 |     \|,' (   )-(   ) 
115 |      Y ___`-'   `-' 
116 |      |/__/   `-' 
117 |      | 
118 |      | 
119 |      |    -hrr- 
120 |   ___|_____________ 
121 | </pre>
122 | 
123 | Playing the blame game
124 | ----------------------
125 | 
126 | If you need to blame someone, the best way to do so is by quoting them:
127 | 
128 | > I, at any rate, am convinced that He does not throw dice.
129 | 
130 | Or perhaps someone a little less eloquent:
131 | 
132 | > I wish you'd have given me this written question ahead of time so I
133 | > could plan for it... I'm sure something will pop into my head here in
134 | > the midst of this press conference, with all the pressure of trying to
135 | > come up with answer, but it hadn't yet...
136 | >
137 | > I don't want to sound like
138 | > I have made no mistakes. I'm confident I have. I just haven't - you
139 | > just put me under the spot here, and maybe I'm not as quick on my feet
140 | > as I should be in coming up with one.
141 | 
142 | Table for two
143 | -------------
144 | 
145 | <table>
146 |   <tr>
147 |     <th>ID</th><th>Name</th><th>Rank</th>
148 |   </tr>
149 |   <tr>
150 |     <td>1</td><td>Tom Preston-Werner</td><td>Awesome</td>
151 |   </tr>
152 |   <tr>
153 |     <td>2</td><td>Albert Einstein</td><td>Nearly as awesome</td>
154 |   </tr>
155 | </table>
156 | 
157 | Crazy linking action
158 | --------------------
159 | 
160 | I get 10 times more traffic from [Google] [1] than from
161 | [Yahoo] [2] or [MSN] [3].
162 | 
163 |   [1]: http://google.com/        "Google"
164 |   [2]: http://search.yahoo.com/  "Yahoo Search"
165 |   [3]: http://search.msn.com/    "MSN Search"
166 | 
167 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Bogardo\markdown-codepen
 2 | ================
 3 | 
 4 | An extension for [cebe/markdown](https://github.com/cebe/markdown) to provide a shortcode to embed codepens from http://codepen.io/ in your Markdown.
 5 | 
 6 | 
 7 | ### Syntax ###
 8 | 
 9 | `codepen[vclLe][350]`
10 | 
11 | `codepen[vclLe][350][js]`
12 | 
13 | `codepen[vclLe][350][js][1234]`
14 | 
15 | ### Parameters ###
16 | 
17 | - Pen ID
18 | - Height (px)
19 | - Active tab `optional`
20 | - Theme ID `optional`
21 | 
22 | ### Screenshot ###
23 | ![Screenshot](http://i.imgur.com/gZZs2FN.png)
24 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "bogardo/markdown-codepen",
 3 |     "require": {
 4 |         "cebe/markdown": "0.9.*"
 5 |     },
 6 |     "authors": [
 7 |         {
 8 |             "name": "Bogardo",
 9 |             "email": "chrisbogaards@gmail.com"
10 |         }
11 |     ]
12 | }
13 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require 'vendor/autoload.php';
 4 | require 'Markdown.php';
 5 | 
 6 | $parser = new Bogardo\Markdown();
 7 | $result = $parser->parse(file_get_contents('MarkdownTest.md'));
 8 | 
 9 | echo $result;
10 | ?>
11 | <script async src="//codepen.io/assets/embed/ei.js"></script>


--------------------------------------------------------------------------------