0

I am trying to create some fenced in code blocks on my gh-pages blog, but I am encountering some issues.

This is within my _config.yml 

#Stuff I have added
highlight: rouge
markdown: kramdown

kramdown:
  input: GFM
  highlighter: rouge

Now I am attempting to run this code as follows,

~~~
Is this really how code should be represented?

Answer = NO!!!
~~~

but this is

enter image description here

Please help, I just want the nice fenced code structurem Thanks!

Wilson Vargas
  • 2,841
  • 1
  • 19
  • 28
Ian Goode
  • 1
  • 2
    What is the desired output? You didn't specify any language and there is no code in there so I don't see any problem the way is working – marcanuy Oct 04 '17 at 23:03
  • I want the code to have a nice fenced structure, but (as shown in my picture) my current set up just acts as if it is in line code which just looks awful. – Ian Goode Oct 04 '17 at 23:54
  • What do you mean by “nice fenced structure”? The ‘fences’ are the `~` characters (or ` characters in some variants) in the _source_, as opposed to the original Markdown spec which uses indentation for code (and which can sometimes be a bit awkward to use for copy/paste etc.). – matt Oct 05 '17 at 18:46
  • I've updated the answer – marcanuy Oct 05 '17 at 18:50

2 Answers2

0

It is not showing a fenced block for the source code because there is no source code.

If you don't specify anything then it will use:

<div class="highlighter-rouge"><pre class="highlight"><code>
Is this really how code should be represented?

Answer = NO!!!
</code></pre>
</div>

You always have the option to customize the output using the generated classes like highlighter-rouge.

On the other hand, if you specify a language:

~~~ html
<html>
<body>
<p>Is this really how code should be represented?</p>
<div>Answer = NO!!!</div>
</body>
</html>
~~~

then it will generated more spific styling:

<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;p&gt;</span>Is this really how code should be represented?<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div&gt;</span>Answer = NO!!!<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>

If you still aren't able to see any default syntax highlighting, then the css containing those classes is missing, typipcally Jekyll comes with _syntax-highlighting.scss where it already contains them, but you can use the color scheme you want, for example the default theme uses this one: https://github.com/jekyll/minima/blob/master/_sass/minima/_syntax-highlighting.scss

Or you can install whatever Rouge theme you want: https://github.com/jneen/rouge/tree/master/lib/rouge/themes

$ rougify foo.rb
$ rougify style monokai.sublime > syntax.css
marcanuy
  • 23,118
  • 9
  • 64
  • 113
0

Try creating fenced code blocks with triple backticks ``` instead of triple-tilde ~~~

```
Is this really how code should be represented in GFM?

Answer = YEP!!!
```
ashmaroli
  • 5,209
  • 2
  • 14
  • 25
  • Nope, I have already tried using ``` and ~~~ along with redcarpet and just kramdown without the GFM. All of the results give me the same gross line by line fencing of my code. – Ian Goode Oct 05 '17 at 17:04
  • if @marcanuy 's updated answer doesn't fix the problem for you, you'll need to post a public link to your repo, so that one can try to reproduce the situation first-hand.. otherwise this just ends up being an XY problem – ashmaroli Oct 06 '17 at 09:05