Andrew Taylor

<p><a href="https://codepen.io" rel="nofollow ugc">CodePen</a> is an online code editor for front-end development. You build things (we call them Pens) with HTML, CSS, and JavaScript, and the languages and libraries that go along with those. Any Pen can be embedded on another site, making them useful for blog posts, documentation, forums, etc.</p>
<p>This block makes it easy to embed them. While oEmbed (just paste in a Pen URL!) also works for CodePen embeds in the block editor, this plugin allows for much more control, like setting the the height, theme, and default tabs.</p>


CodePen Embed Block

I write web development tutorials in my blog and have tried many syntax highlighter options for code snippets in the past.

I recently decided to give Codepen a try and this plugin is surely the best way to embed and configure those!

Great tutorial tool

James DiGioia

<p>A self-hosted alternative to putting your code snippets on Gist.</p>
<p><a href="https://travis-ci.org/intraxia/wp-gistpen" rel="nofollow ugc"></a>  <a href="https://codeclimate.com/github/intraxia/wp-gistpen/maintainability" rel="nofollow ugc"></a></p>
<p>You use WordPress because you want control over your writing. Why give Gist or Codepen your code snippets? WP-Gistpen is a self-hosted replacement for your WordPress blog.</p>
<p>Features include:</p>
<ul>
<li>Revision saving</li>
<li>Gist import & export</li>
<li>PrismJS syntax highlighting</li>
<li>Prism-based text editor</li>
<li>oEmbed snippet embedding</li>
</ul>
<h3>Fixed</h3>
<ul>
<li>Fixed rendering output with JSX language</li>
</ul>
<h4>1.2.0</h4>
<p><strong>Note: This bumps the minimum required WordPress version to 4.7. A future release will bump the minimum WordPress version to 5.2 and the minimum PHP version to 5.6. This will be released as 2.0. There is plenty of time, but this is coming.</strong></p>
<p><strong>Added</strong></p>
<ul>
<li>Added slug to repo API</li>
<li>Add copy shortcode button to editor</li>
<li>Add API pagination to Repo resource</li>
<li>Bump prism-themes and add new themes</li>
</ul>
<p><strong>Fixed</strong></p>
<ul>
<li>Updated JS dependencies</li>
<li>Fix button alignment on editor controls</li>
</ul>
<h4>1.1.6</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Busted deploy</li>
</ul>
<h4>1.1.5</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Add PHP version requirement
<ul>
<li>This was previously handled in code only, but will now appear in wp.org</li>
</ul>
</li>
<li>Render BE error messages in UI</li>
<li>Remove JSS for smaller bundle</li>
</ul>
<h4>1.1.4</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Added label to filename input</li>
<li>Bumped dependencies</li>
</ul>
<h4>1.1.3</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Escape filename on FE & BE</li>
<li>Accessibility improvements
<ul>
<li>Add line numbers to the editor</li>
<li>Allow alt + tab to escape the editor</li>
<li>Improve border of focused controls</li>
<li>Fix toolbar colors</li>
</ul>
</li>
</ul>
<h4>[1.1.2][] – 2019-05-27</h4>
<ul>
<li>Rewrite & stabilize FE into TypeScript & latest brookjs</li>
</ul>
<h4>[1.1.1][] – 2018-06-28</h4>
<ul>
<li>Fixed buggy deploy</li>
</ul>
<h4>[1.1.0][] – 2018-06-22</h4>
<ul>
<li>Upgrade the editor into React</li>
<li>Remove LightNCandy
<ul>
<li>First step towards supporting php-5.3 again</li>
</ul>
</li>
<li>Tighten up Flowtypes</li>
<li>Display spinner when saving</li>
</ul>
<h4>[1.0.3][] – 2018-06-09</h4>
<ul>
<li>More editor CSS fixes</li>
<li>Generate languages.json instead of maintaining manually</li>
<li>Validate blobs in API endpoint
<ul>
<li>Requires filename now</li>
</ul>
</li>
<li>Order Runs in descending order</li>
<li>Fix demo code indentation</li>
<li>Simplify Blob component implementation</li>
</ul>
<h4>[1.0.2][] – 2018-04-03</h4>
<ul>
<li>Fix CSS display in editor</li>
</ul>
<h4>[1.0.1][] – 2018-04-03</h4>
<ul>
<li>Fix deployment scripts
<ul>
<li>The old scripts resulted in a botched deployment with missing files. This readds them.</li>
</ul>
</li>
</ul>
<h4>[1.0.0][] – 2018-03-26</h4>
<p>Almost three years in the making!</p>
<p><strong>Removed</strong></p>
<ul>
<li>
<p>Database migration from old versions</p>
<ul>
<li>
<p>If you’re on the latest version of WP-Gistpen, you should have no problems. Given that the plugin hasn’t been updated on .org in 2+ years, and .org reports the only versions are 0.5.x+, anyone who is still using an old version of WP-Gistpen is unlikely to upgrade to 1.0.0+ anyway. We are going to remove the Migration code because it’ll allow us to remove a lot of old code that is currently only being used by it.</p>
<p>If you’re using an old version of WP-Gistpen, you’ll need to upgrade to 0.5.2+ before upgrading to 1.0.0 or the database migration will not be performed correctly. Fresh installs should have no problems either.</p>
</li>
</ul>
</li>
</ul>
<p><strong>Added</strong></p>
<ul>
<li><strong>Completely rewritten from the ground up</strong></li>
<li>New internal architecture
<ul>
<li>Built on <a href="https://github.com/intraxia/jaxion" rel="nofollow ugc">Jaxion</a>, WordPress framework</li>
<li>Improved Database layer & use of Models</li>
</ul>
</li>
<li>WP-API integration
<ul>
<li>This requires an upgrade to WordPress 4.6+.</li>
</ul>
</li>
<li>New code snippet editor
<ul>
<li>Custom snippet editor</li>
<li>Built on <a href="https://github.com/valtech-nyc/brookjs" rel="nofollow ugc">brookjs</a>, Prism, & React.js</li>
</ul>
</li>
<li>New Prism plugins:
<ul>
<li>Show invisibles: Display tabs and line returns as characters</li>
<li>Show language: Display the language in the embed</li>
<li>Copy-to-clipboard: Display button to copy code to clipboard</li>
</ul>
</li>
<li>Supports all Prism languages & built-in Prism themes + bonus from prism-themes</li>
</ul>
<p><strong>Fixed</strong></p>
<ul>
<li>Fixed code sample display on mobile</li>
<li>Fixed display on custom post type pages</li>
<li>Fixed bug where adding two files would only save one at a time</li>
<li>Tighten up revision saving logic</li>
</ul>
<h4>[0.5.8] – 2015-07-26</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Fixed a bug introduced in WordPress 4.2.3 where cap checks fail for <code>edit_post</code> on a post_id of 0.</li>
<li>Also loosened a couple checks because null values were being cast to 0.</li>
</ul>
<h4>[0.5.7] – 2015-05-23</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Use <code>wpdb</code> to get the posts table for alternate prefix and Multisite compatibility (thanks @janizde!)</li>
</ul>
<h4>[0.5.6] – 2015-02-17</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Logic bugs raised by Travis</li>
</ul>
<h4>[0.5.5] – 2015-02-15</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Fixed syncing bug, renabled everything
<ul>
<li>So sorry about the multiple releases. Ran into the problem after deploying, and didn’t want anyone’s DB to get out-of-sync. Everything looks good now, but let me know if you experience issues.</li>
</ul>
</li>
</ul>
<h4>[0.5.4] – 2015-02-14</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Disable importing/exporting en masse until we fix export/sync bug</li>
</ul>
<h4>[0.5.2] – 2015-02-14</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Add new database migration to fix Gist exports of pre-0.5.0 Gistpens</li>
</ul>
<h4>[0.5.0] – 2015-02-14</h4>
<p><strong>Added</strong></p>
<ul>
<li>MAJOR FEATURE: Gist interoperability
<ul>
<li>Gistpens can be exported to Gist on a case-by-case basis</li>
<li>Most Gists can be imported into Gistpen
<ul>
<li>Unsupported languages get changed to “Plaintext” – sorry!</li>
</ul>
</li>
</ul>
</li>
<li>New Feature: Revisions and history</li>
<li>Bad tests for everything :/</li>
<li>New languages:
<ul>
<li>Actionscript</li>
<li>Applescript</li>
<li>Dart</li>
<li>Eiffel</li>
<li>Erlang</li>
<li>Gherkin</li>
<li>Git</li>
<li>Haml</li>
<li>Handlebars</li>
<li>Jade</li>
<li>LaTeX</li>
<li>LESS</li>
<li>Markdown</li>
<li>Matlab</li>
<li>NASM</li>
<li>Perl</li>
<li>Powershell</li>
<li>R</li>
<li>Rust</li>
<li>Scheme</li>
<li>Smarty</li>
</ul>
</li>
</ul>
<p><strong>Changed</strong></p>
<ul>
<li>CMB -> CMB2</li>
<li>Massive reorganization wit namespacing + autoloading</li>
<li>Unminified scripts enqueued when <code>WP_SCRIPT_DEBUG</code> is true</li>
<li>ACE editor rewritten in Backbone.js
<ul>
<li>Saving and updating all done with AJAX</li>
</ul>
</li>
<li>Menu icon pen -> code</li>
<li>Improved .org deployment process (No more dumbass “forgot to minify js” commits/releases)</li>
</ul>
<p><strong>Fixed</strong></p>
<ul>
<li>Deleting bug
<ul>
<li>Files were being left behind when Zips were deleted</li>
</ul>
</li>
<li>Strings are now translatable</li>
<li>All languages cleaned up and verified working
<ul>
<li>HTML & XML are split again</li>
</ul>
</li>
</ul>
<h4>[0.4.0] – 2014-10-03</h4>
<p><strong>Added</strong></p>
<ul>
<li>MAJOR FEATURE: Multiple files can be created in a single Gistpen
<ul>
<li>First step towards Gist compatibility</li>
<li>The database gets upgraded to account for this, so PLEASE make a backup before you upgrade</li>
</ul>
</li>
<li>ACE editor</li>
</ul>
<p><strong>Fixed</strong></p>
<ul>
<li>Properly escaping content display</li>
</ul>
<h4>[0.3.1] – 2014-08-03</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Forgot to minify JavaScripts</li>
</ul>
<h4>[0.3.0] – 2014-08-03</h4>
<p><strong>Changed</strong></p>
<ul>
<li>Use <a href="http://prismjs.com/" rel="nofollow ugc">PrismJS</a> over SyntaxHighlighter</li>
</ul>
<p><strong>Added</strong></p>
<ul>
<li>Options page</li>
<li>Theme switching</li>
<li>Line numbers plugin</li>
<li>Line-highlighting</li>
<li>Link to lines</li>
<li>Languages:
<ul>
<li>C</li>
<li>Coffeescript</li>
<li>C#</li>
<li>Go</li>
<li>HTTP</li>
<li>ini</li>
<li>HTML/Markup (XML has been migrated here)</li>
<li>Objective-C</li>
<li>Swift</li>
<li>Twig</li>
</ul>
</li>
</ul>
<p><strong>Removed</strong></p>
<ul>
<li>Languages (*If you need any of these languages readded, please open an issue on <a href="https://github.com/intraxia/WP-Gistpen" rel="nofollow ugc">GitHub</a> to discuss.)
<ul>
<li>AppleScript</li>
<li>ActionScript3</li>
<li>ColdFusion</li>
<li>CPP</li>
<li>Delphi</li>
<li>Diff</li>
<li>Erlang</li>
<li>JavaFX</li>
<li>Perl</li>
<li>Vb</li>
</ul>
</li>
</ul>
<h4>[0.2.3] – 2014-07-28</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Uninstall/reinstall language deleting bug</li>
</ul>
<h4>[0.2.2] – 2014-07-28</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Fix mis-enqueued scripts (again!)</li>
</ul>
<h4>[0.2.1] – 2014-07-27</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Fix mis-enqueued scripts</li>
</ul>
<h4>[0.2.0] – 2014-07-26</h4>
<p><strong>Added</strong></p>
<ul>
<li>“Insert Gistpen” button in TinyMCE</li>
</ul>
<p><strong>Updated</strong></p>
<ul>
<li>Gistpen icon</li>
<li>Code organization</li>
<li>README</li>
<li>Build script</li>
</ul>
<h4>[0.1.2] – 2014-07-17</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>More bugfixes</li>
</ul>
<h4>[0.1.1] – 2014-07-17</h4>
<p><strong>Fixed</strong></p>
<ul>
<li>Autoloader</li>
</ul>
<p><strong>Changed</strong></p>
<ul>
<li>Use defined constant for dir_path</li>
</ul>
<h4>[0.1.0] – 2014-07-17</h4>
<p><strong>Added</strong></p>
<ul>
<li>Gistpen post type</li>
<li>Embeddable in posts via shortcode</li>
<li>Use SyntaxHighlighter to display</li>
</ul>


WP-Gistpen

A self-hosted alternative to putting your code snippets on Gist.

CodePen Embed Block vs WP-Gistpen