Editing Code Samples

[lukewatts]

I write a lot of code related articles and I'd like to be able to add some classes to the pre tags in my posts so I can use PrismJS to add language based highlighting.

Is this possible right now, and if not is it planned?

• Postleaf version: 1.0.0-alpha.3
• Node version: 7.9.0

[lukewatts]

Ideally, I'd just like to be able to edit all the raw HTML content in the editor, so I could add classes to span and the headings etc. I feel very restricted not being able to edit the HTML when I want to.

[claviska]

Same here. You can currently type three backticks on a new line followed by the language code. For example:

```js

And it will turn into this:

<pre data-code="js">

Unfortunately, there's no way to change the code once it's created. This is something I'd like to improve, perhaps through a code tool.

I'd also like to switch to the following syntax based on GitHub Flavored Markdown:

<pre>
  <code class="language-js">
    ...
  </code>
</pre>

However, there's an issue with the way TinyMCE handles <code> inside of <pre> (it treats it as an inline element instead of a block element).

Changing code sections to special content blocks (via a code tool, for example) will resolve that, but at the expense of losing inline editing (it would open as a panel instead where you can enter a language and whatnot — same way the embed tool works).

Thanks for reminding me about this. I'm really interested in your thoughts on the proposed approach. I'd love to make this improvement for the next alpha release since it would be a breaking change.

[lukewatts]

The 3 backticks syntax is good. Didn't realise that was a possibility. I'll try that.

Markdown would be nice also for sure. Regarding the html editor a popout/slide-out panel to add html snippets or raw html could work, as long as They'VE can be made to leave it unaltered

[lukewatts]

Or perhaps a Html mode which simply switched the content with the html but you don't leave the main editor.

[claviska]

As you know, syntax highlighting in the browser is a bit challenging. There are a number of great libraries that tackle it these days, but nothing that lets you do it inline in a raw contentEditable container. That said, we have a couple options:

Use <pre> like we're doing now

Pros:

• It works today.
• It's a simple workaround for a complicated problem.

Cons:

• You don't get syntax highlighting in the editor. In fact, you'll need to explicitly disable your highlighter by checking for window.Postleaf before initializing, otherwise the highlighted HTML will be saved in your post (likely causing future highlights to fail).
• You can't change a code block's language without deleting/recreating the entire block.
• You can't use the <pre><code class="language-js">...</code></pre> structure that GFM likes (mostly a semantic issue).

Create a plugin

This is a more elegant approach. The idea is similar to TinyMCE's code sample plugin where you can select a language and insert a code block via dialog.

Pros:

• You see the highlighted code exactly as it will appear on your live webpage.
• You can easily change a code block's language.
• You can use the <pre><code class="language-js">...</code></pre> structure that GFM likes.

Cons:

• Not inline.
• Requires a tight integration with a specific third-party lib (a good reason this shouldn't be in core since the highlighter also needs to be included in your theme).
• Postleaf doesn't have a plugin API yet.

Both have ups and downs. I prefer the plugin approach, but hopefully the current approach will suffice until the plugin API lands.

[claviska]

Heads up: I'm changing the triple backtick output from this:

<pre data-code="js">

To this:

<pre class="language-js">

It's still not the same as GFM, but it's a lot closer and still semantically correct.

[lukewatts]

I think that's a good solution! Works for what I had in mind at least

[siggi2git]

Why not enable HTML Mode and all happy ?