Code for ggplot2 not rendering properly

[lambdamoses]

Whenever I do something like

foo <- ggplot(...) +
  geom_*()
foo

The code does not render properly. I get something like this in the preview in my browser when I serve site (haven't deployed my site yet, so this is run locally):

I only get this problem when I use ggplot2. The plot renders correctly.

Furthermore, for the first chunk, the comments are not highlighted (they're gray in other chunks).

I'm using the RStudio 1.2 preview version and the most recent blogdown from CRAN, and the Tranquilpeak theme with default code highlighting from the theme. I tried other code highlighting styles and this problem persists, so I don't think it's the problem with code highlighting style.

[tcgriffith]

could you provide your repo?

[lambdamoses]

Here it is: https://github.com/lambdamoses/blog One of the "posts" was added to reproduce the code rendering problem. You may also see the problem in one of the real posts, in which I used gganimate to make Lorenz attractor animations.

[tcgriffith]

Your problem is that code highlighting by highlight.js is incorrect in the final html page:

<code class="codeblock hljs shell">......

<code class="codeblock hljs xml">......

<code class="codeblock hljs perl">......

By searching I found that highlightjs will auto-determine what language your code is using and highlight by that, but I'm not familiar with highlightjs, hope somebody else could help.

[lambdamoses]

Thanks for your response! Which html file is that? I can't find it in my repo. For the toy example, in the html file generated from the Rmd file in the content/post directory, I saw this:

<pre class="r"><code>foo &lt;- ggplot(iris, aes(Sepal.Length, Sepal.Width, color = Species)) +
  geom_point()
foo</code></pre>

So it knows that my code is R.

[tcgriffith]

@lambdamoses

I ran hugo serve and view the site in chrome, then right-click -> inspect to view the source in the developer tools.

[lambdamoses]

I see. What happened is that highlight.js mistook my R code as xml. I have just fixed this problem by commenting out the syntaxHighlighter = "highlight.js" that came with the Tranquilpeak theme in config.toml, and added my own code highlighting downloaded from highlight.js's website following the instruction on https://amber.rbind.io/blog/2017/11/15/syntax-highlighting/. Now the code I found problematic is correctly rendered. Probably what went wrong is that the code highlighting style that came with Tranquilpeak does not support R.

[tcgriffith]

I think I found the problem, It's related to the theme.

highlightjs is configured from here

delete it or modify the configuration according to highlightjs doc

Another found is that this theme has a shortcode {{< codeblock >}} to do the fancy codeblock highlighting, but you can't use it unless you write pure md.

[lambdamoses]

I added the languages option, and the code rendered correctly. But the problem is, the code recognizer either has trouble highlighting R or the default theme doesn't work for R. I inspected the webpage in my browser and my R code got misidentified as bash or Python. Not wanting to deal with scss, eventually I still commented out the native code highlighting of the theme and added code highlighting as if it doesn't come with the theme.

<script>
$(document).ready(function() {
  hljs.configure({ classPrefix: '', useBR: false, languages: ['r', 'bash', 'python', 'c++'] });
  $('pre.code-highlight > code, pre > code').each(function(i, block) {
    if (!$(this).hasClass('codeblock')) {
      $(this).addClass('codeblock');
    }
    hljs.highlightBlock(block);
  });
});
</script>

[yihui]

I always disable highlight.js's auto detection of languages myself: https://github.com/yihui/hugo-ivy/blob/4d642eb577dea4a4f3836fe9c838d9ec3034e644/layouts/partials/footer_highlightjs.html#L10

[ktiu]

Same problem here.

It seems to me that highlight.js expects the class attribute in the code tag

<pre><code class="html">...</code></pre>

while blogdown auto-generates the class attribute in the pre tag (when knitting HTML from Rmd):

<pre class="r"><code>...</code></pre>

I'm just not sure if this is an issue with blogdown, or knitr, or pandoc...

I always disable highlight.js's auto detection of languages myself: https://github.com/yihui/hugo-ivy/blob/4d642eb577dea4a4f3836fe9c838d9ec3034e644/layouts/partials/footer_highlightjs.html#L10

This only disables highlighting completely.