Add color to code added in posts


#1

how can we add color to the code added in the posts?

I have used this

var a = 0;
var b = 0;

but still in my posts the color of the code is not changing.


#2

use backticks and the language identifier

```javascript

var a = 0;
var b = 0;
```

#3

Tried this too. But still it is not working.


#4

I think you need to use a highlighter css file - did you add that to your site?

quick google search came up with this, no idea if it is correct but it looks the same as what I use:


#5

A syntax-highlighter stylesheet is included within Minima by default… so unless you’re using a different theme, or have overridden _sass/minima.scss, you should already have the necessary styles defined… otherwise, refer to @rdyar’s comment above…


#6

I have added the syntax highligher stylesheet. But still it is not getting colored.

For example: This is the code.

go
func (a Vector) Add(b Vector) Vector {
  return Vector{
    X: a.X + b.X,
    Y: a.Y + b.Y,
    Z: a.Z + b.Z,
  }
}

func TestAdd(t *testing.T) {
  result := Vector{1., 1., 1.}.Add(Vector{2., 2., 2.})
  assert.Equal(t, Vector{3., 3., 3.}, result, "should add correctly")
}

and what it look:

image


#7

I think we’ll be able to help better if there’s public link to your repository… it could be just a typo somewhere or an incorrect language identifier…


#8

Sure. Here is the link to the repo.


#9

Your blog seems to be working fine… code-blocks rouge-ified as expected…, stylesheets detected and imported as expected…

The issue is with the stylesheet itself.
Many of the span classes have no color-data… just declarations to format the <span> as bold. So you’ve two options now:

  1. Search for another related stylesheet
  2. Add the colors yourself in tune with your blog’s theme.

#10

I have checked all files on the internet. It all the same.


#11

:slight_smile: You know what to do next then… Open up the in-browser Developer Tools and use it to add the colors yourselves…


#12

@ashmaroli. Read this question.

Does it make any difference in the coloring of the syntax by using different file type?


#13

No, it doesn’t… only the language-identifier passed to Rouge matters


#14

Instead of using this

```ruby
```

Will this also work?

    {% highlight ruby %}
    def print_hi(name)
      puts "Hi, #{name}"
    end
    print_hi('Tom')
    #=> prints 'Hi, Tom' to STDOUT.
    {% endhighlight %}

#15

Yes both work. Using Jekyll’s {% highlight %} tag outputs slightly different HTML but has the same affect as using the GFM backtick method.

{% highlight %} method outputs this HTML:

<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>

3 backticks method outputs this HTML:

<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span>
</code></pre></div></div>

One wraps it in a figure element, the other uses a div with some slight changes in class names.

To get a color scheme you want it’s a combination of adding the correct language lexer (eg. ruby, which appears you’re doing correctly), and adding the appropriate CSS.

If you look at the HTML being outputted above by Rouge you’ll see all kinds of span elements wrapping the various parts of your code block. Each has a specific class you’ll need to add color declarations to get the coloring you want.

I’m not sure what each class means, but I’m sure if you searched around Rouge/Pygments docs it would explain it.

There’s a bunch of themes out there to serve as a starting point. In theory any of the styles for Pygments will work as Rouge is spiritual successor to that. You’re best bet is take the CSS from a style that is close to what you want and adjust as you need.