Syntax highlighting of code blocks

(croaky) #1

We have a pretty technical forum with frequent code blocks. We need some color in our lives!

highlight.js is pretty awesome for this. Here’s an example of highlight.js in action:

(Chris Hunt) #2

Don’t we have this? :smiley:

def stolen_from_thoughtbot
  big_cities = ['New York, NY', 'Boston, MA', 'San Francisco, CA'] # long list of cities
  
  big_cities.each do |city|
    Location.near(city, 50).each do |location|
      LocationSerializer.new(location).serializable_hash
    end
  end
end
(Sam Saffron) #3

Have you seen this?

def hello
   puts "world"
end

```ruby 
def hello
   puts "world"
end
```

What we really need to do is add a setting to bind the “computer” glyph to create GitHub style blocks vs the pre style blocks it does out of the box

PRs totally welcome in this area.

(Ben Orenstein) #4

Dumb question, but how can display the fenced code block without interpolation like you’ve done here?

I want to include instructions for using fenced code block in my welcome message, but I can’t get Discourse to stop interpolating my “tick-tick-tick-ruby” string.

(Régis Hanol) #5

You need to select your code and either clic on the code sample button on the toolbar or press Ctrl+K.

You can alternatively add 4 whitespaces before each line.

(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:

```ruby
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.

Thanks!

(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:

Pasted image776×511 12.9 KB

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”.

See:

  • this is a list

  • another list item

     ```
 tasks:
    atask: {}
    # ...
 ```

  • here is another list item

Click here to see the raw markup for this post.

https://meta.discourse.org/raw/7242/12

(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?).