Syntax highlighting of code blocks

(Sam Saffron) #6

Yeah what @zogstrip said

I think we should amend the help text there from “Code sample” to “Pre-formatted text”, we also need an extra icon for code sample (default off, but that can be enabled from the site settings).

Feeling brave with a PR ? :slight_smile:

(Ben Orenstein) #7

I’m afraid you’ve misunderstood me.

I want to teach my users how to do language-specific highlighting in Discourse. So I want to write a post where I tell them how to do it.

The problem is, if I write out “tick-tick-tickruby” in a post, Discourse sees that and removes it, thinking I want to show some code.

I want to know how to include the literal string that one uses to fence a code block without having Discourse interpolate it.

@sam did this above. First we see the highlighted code, then we see what a user would type to achieve it.

How do I display the text a user would type to highlight code without it being “eaten” by Discourse?

(edited by @zogstrip)
Like this:

foo = bar

(Régis Hanol) #8

I just edited your post so that you can see how to do it. Hope it clears it up!

(Jeff Atwood) #9

You just indent by 4 spaces. See Markdown Editing Help - Super User

(Ben Orenstein) #10

Ahh, got it now.


(Chase Sterling) #11

Hmm, I’m having trouble getting the backticks preformatted as well. When indenting the whole block 4 spaces it just ends up indenting my formatted code more. I have included a screen shot of the problem:

I’d like the backticks to be included in rendered page for users to see.

A button to insert the backticks from the post editor would be nice too.

Bug with the cursor and image
(Jeff Atwood) #12

Indent 8 spaces there, not 4. The first 4 just indicate “this block is a part of the bullet”.


  • this is a list

  • another list item

        atask: {}
        # ...
  • here is another list item

Click here to see the raw markup for this post.

(Chase Sterling) #14

Aha! Thank you very much, I was totally forgetting about the indents for the bullet items.

(Simon Sarris) #15

Why does syntax highlighting work when I do triple tick: (```)

var test = "aaa"

But not when I do 4 spaces:

var test = "aaa"


It works with 4 spaces on StackOverflow, markdown, so I assumed it would be the same here.

(Jeff Atwood) #16

Because Stack Overflow is a site for coders? Here there is preformatted text and code fences, which did you want?

(Simon Sarris) #17

Ah I see, very sorry. I had assumed there would be some inference built-in as a default for <pre><code> blocks, and that I was doing something wrong.

(Walter Stabosz) #18

What are the supported language names that can follow the opening backticks ?

Also, what does “PR” mean?

(Jens Maier) #19

Pull request. Git has no central repository server; sourcecode is shared by pushing code changes (called commits) to other developers or requesting that another developers should pull some commits from your repository. Github builds a UI around this process.

(Sam Saffron) #20

See: highlight.js demo

(Artem Pelenitsyn) #21

If two ways for making preformatted code (4 spaces vs. code fences) have different effect, why there is only one button in UI (namely, for adding 4 spaces)? How new users suppose to guess about code fences? It would be great to add another button for this (make it optional in admin panel?).

(Sam Saffron) #22

I support adding another optional button here if anyone wants to work on it.

(Artem Pelenitsyn) #23

@sam I’m thinking right now about adding such a button as a plugin (without, say, any optional’ness): those admin’s who want to enable it just install this plugin, so no need to add any additional options to admin panel.

The problem is: I can’t find any guide on creating DC plugins. I guess this topic is most relevant here. But it contains just a bunch of examples quite far from the one, I want to have.

Where would you suggest to start implementing such a plugin. Maybe you’re aware about similar ones and can point me on them.

(Jeff Atwood) #24

I think it’s better to have a site setting that switches the code button from

  • indent 4 spaces


  • fenced code blocks

Because on a site that is mostly about code, for programmers, you’d certainly want syntax highlighted code blocks almost all the time. And for people that aren’t coders… they almost never want syntax highlighted code blocks.

Triple back-tick button in the editor
(Artem Pelenitsyn) #25

We have CS department’s university forum for 10 years. While it is true that students and teachers there usually want programming source code highlighting, we use just preformatted code quite often. So we would like to see plugin with extra button. This does not contradicts with site-wide switch for original button though.

(Artem Pelenitsyn) #26

I finally added a button for adding code fences through custom css. But now I have a problem with language that highlighter choose.

We use Pascal listings a lot on our forum. A see, highlight.js is aware about Delphi, not Pascal. Great. But for my Pascal/Delphi code

  Writeln(add(4,5));     {user function add}
  Writeln(add1(4,5));  {user function add1}

it chooses SQL (as it can be seen in class attribute of code elemet); also add and add1 have defferent presentation (probably have meaning for SQL, but complete nonsence for Pascal).

Adding delphi to the fences:


does not help: it adds lang-delphi to class attribute, but sql stays there and presentation does not change at all.

Can anyone suggest how to enable Pascal/Delphi highlightning on Discourse?