dwhitevisoft

<p>WP Markdown Syntax Sugar work in conjunction with plugins such as <a href="https://wordpress.org/extend/plugins/wp-markdown/" rel="ugc">wp-markdown</a><br />
and <a href="https://wordpress.org/extend/plugins/wp-highlightjs/" rel="ugc">wp-highlight.js</a>. Markdown is fantastic markup for easily<br />
writing blogs, and <a href="http://softwaremaniacs.org/soft/highlight/en/" rel="nofollow ugc">highlight.js</a> is an extremely easy way to highlight<br />
code examples. In most cases, highlight.js automatically detects the proper language for a block of code. In certain<br />
cases, primarily if your code example is short, highlight.js could improperly detect the language that you are using;<br />
that is where this plugin comes into play. By adding one line to your code blocks, you can explicitly set the language<br />
that you are using, allowing highlight.js to properly format your code.</p>
<p>The concept is inspired by the <a href="https://github.com/spjwebster/wp-markdown-syntax-highlight" rel="nofollow ugc">wp-markdown-syntax-highlight</a><br />
plugin.</p>
<p>The usage is extremely simple. Just add a shebang as the first line of your code example with the language you are using.</p>
<pre><code>#!ruby
class Foo < Bar
  def hello
    puts "Hello World!"
  end
end
</code></pre>
<p>The shebang is removed, and the code is outputted as:</p>
<pre><code><pre><code class="language-ruby">class Foo < Bar
  def hello
    puts "Hello World!"
  end
end</code></pre>
</code></pre>
<p>Now the code block is properly formatted for highlight.js to do its magic, and the code snippet will be properly<br />
highlighted.</p>


WP-Markdown-Syntax-Sugar

WP Markdown Syntax Sugar is a simple plugin that works in conjunction with Markdown code blocks and highlight.js to properly format code.

Luis Sacristán

<p>Allows to add snippets blocks to your content: Javascript, CSS, HTML…</p>
<h3>Purpose</h3>
<p>Add snippet blocks to your WordPress content using the new Gutenberg editor</p>
<h3>How to use it</h3>
<ul>
<li>Add a Snippet block within your content</li>
<li>Include your code</li>
<li>Select the language</li>
<li>Save the post and check your front-end</li>
</ul>
<h3>Supported languages</h3>
<ul>
<li>Apache</li>
<li>Bash</li>
<li>C#</li>
<li>C++</li>
<li>CSS</li>
<li>Erlang</li>
<li>Go</li>
<li>HTML</li>
<li>XML</li>
<li>Handlebars</li>
<li>JSON</li>
<li>Java</li>
<li>JavaScript</li>
<li>Markdown</li>
<li>Objective C</li>
<li>PHP</li>
<li>Python</li>
<li>R</li>
<li>Ruby</li>
<li>Rust</li>
<li>SCSS</li>
<li>SQL</li>
<li>Shell</li>
<li>Twig</li>
<li>TypeScript</li>
</ul>
<h3>Credits</h3>
<ul>
<li>Based in Making WordPress Do More <a href="https://github.com/mkdo/block-starter-kit" rel="nofollow ugc">Block Starter Kit</a></li>
<li>Original webpack configuration (before modifications) from <a href="https://github.com/zgordon/gutenberg-course" rel="nofollow ugc">Zac Gordon\’s Gutenberg Course</a>.</li>
<li>Original deploy script (before modifications) from <a href="https://github.com/GaryJones/wordpress-plugin-git-flow-svn-deploy" rel="nofollow ugc">Garry Jones</a>.</li>
<li>Webpack HMR thanks to <a href="https://github.com/CGlingener" rel="nofollow ugc">Christian Glingener</a></li>
</ul>
<h3>Requirements</h3>
<p>Gutenberg activated</p>
<h3>Known Issues</h3>
<p>There are no known issues at this time.</p>
<h3>Roadmap</h3>
<ul>
<li>Allow several themes</li>
</ul>


Snippets Block

Allows to add snippets blocks to your content: Javascript, CSS, HTML...

WP-Markdown-Syntax-Sugar vs Snippets Block