search

zwbetz-gh / cupper-hugo-theme

An accessibility-friendly Hugo theme, ported from the original Cupper project.
https://cupper-hugo-theme.netlify.app/
MIT License
301 stars 190 forks source link

syntax highlight for R code chunk in Rmd file #55

Closed daijiang closed 3 years ago

daijiang commented 3 years ago

Hi, it seems that R code chunks in Rmd files are not highlighted. Any idea how to enable it? Thanks!

To reproduce the issue, create a new site with this theme

blogdown::new_site(theme = "zwbetz-gh/cupper-hugo-theme")
blogdown::serve_site()

Then, go to the Blog and click the hello R markdown post. The syntax highlighting does not work on the R code chunks.

zwbetz-gh commented 3 years ago

Hey @daijiang. So syntax highlighting in this theme is done via Prism. The R language is not included by default, but you can add it.

I've pushed some steps, see c2914816e1611e252986cae02da700b95a2ae652

zwbetz-gh commented 3 years ago

And, a link to the readme section https://github.com/zwbetz-gh/cupper-hugo-theme#syntax-highlighting

zwbetz-gh commented 3 years ago

Make sure when writing R snippets, you specify the language like:

```r
Lst <- list(name="Fred", wife="Mary", no.children=3, child.ages=c(4,7,9))


This is how you do it in markdown (`.md`) files. I am not sure if Rmd files are different?
daijiang commented 3 years ago

Hi thanks! I figured out that for .md files based on a previous issue. But it seems .Rmd files are different since the R code chinks are not highlighted after including R language in the css and js files. Can you take a look at it again? Really appreciate your help!

zwbetz-gh commented 3 years ago

Interesting. I'll have to play with .Rmd a bit and see.

On Wed, Jul 28, 2021 at 9:05 PM Daijiang Li @.***> wrote:

Hi thanks! I figured out that for .md files based on a previous issue. But it seems .Rmd files are different since the R code chinks are not highlighted after including R language in the css and js files. Can you take a look at it again? Really appreciate your help!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/55#issuecomment-888741567, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7AFLHFCRH6A3EFZP4DT2CZPHANCNFSM5BE7RFOQ .

zwbetz-gh commented 3 years ago

When you say .Rmd files, does that mean you're using Blogdown?

Regardless, try setting this option in your config.yaml file. It will disable Hugo's built-in syntax highlighting. (On the off change it's overriding Prism). 

highlight:
  codeFences: false
zwbetz-gh commented 3 years ago

Any luck on your end?

daijiang commented 3 years ago

Nope, the code chunks in Rmd posts are still not highlighted...

zwbetz-gh commented 3 years ago

Hmm.

If you'd like me to investigate further, please share a sample R markdown repo where I can reproduce the issue.

Also, keep in mind that I expect this theme to work on a normal site setup.

Whereas for an R markdown project, I'm unsure what "magic" is happening in that framework, that may complicate things.

On Thu, Aug 19, 2021 at 9:17 AM Daijiang Li @.***> wrote:

Nope, the code chunks in Rmd posts are still not highlighted...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/55#issuecomment-901954249, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7EQPAAU4D4MSGDXKE3T5UG6NANCNFSM5BE7RFOQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

daijiang commented 3 years ago

Ok, thanks. I though this is the Rmd version of the cupper theme. I probably just did not pay attention.

But anyway, here is the html generated by default:

<pre class="r"><code>data(cars)
plot(cars$dist, cars$speed)</code></pre>

If I change it to the following, the highlighting will work. 

<pre class="language-r"><code>data(cars)
plot(cars$dist, cars$speed)</code></pre>

I probably can just change the css and js files to make it work. Thanks!

Here is the repo if you want to check it out. (content/post) Thanks!

daijiang commented 3 years ago

Ok, I just added some R code to replace class="r" with class="language-r" for all post html files. And it works. So no worries. At least it is solved at my end. Thanks for your help.

zwbetz-gh commented 3 years ago

Cool. Glad to hear it.

Now future R markdown users can refer back to this thread and hopefully profit.

On Thu, Aug 19, 2021 at 9:38 AM Daijiang Li @.***> wrote:

Closed #55 https://github.com/zwbetz-gh/cupper-hugo-theme/issues/55.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/55#event-5181133251, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7HN57Y4JWFPHMKEG7DT5UJQHANCNFSM5BE7RFOQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

daijiang commented 3 years ago

Not sure what happened recently with this repo. But when I try to create a brand new site with this theme. I got the following error:

> blogdown::new_site(theme = "zwbetz-gh/cupper-hugo-theme")
― Creating your new site
| Installing the theme zwbetz-gh/cupper-hugo-theme from github.com
trying URL 'https://github.com/zwbetz-gh/cupper-hugo-theme/archive/master.tar.gz'
downloaded 7.1 MB

| Adding the sample post to /Users/dli30/Documents/test/content/post/2020-12-01-r-rmarkdown/index.en.Rmd
| Converting all metadata to the YAML format
Error: logged 1 error(s)
| Adding netlify.toml in case you want to deploy the site to Netlify
| Adding .Rprofile to set options() for blogdown
― The new site is ready
○ To start a local preview: use blogdown::serve_site(), or the RStudio add-in "Serve Site"
○ To stop a local preview: use blogdown::stop_server(), or restart your R session
► Want to serve and preview the site now? (y/n) y
Launching the server via the command:
  /Users/dli30/Library/Application Support/Hugo/0.85.0/hugo server --bind 127.0.0.1 -p 4321 --themesDir themes -t cupper-hugo-theme -D -F --navigateToChanged
Error: Error building site: logged 1 error(s)

I can open a new issue if you like.

zwbetz-gh commented 3 years ago

I don't see the actual logged error in that output.

But double check your hugo version. And make sure you have the minimum version or higher, as mentioned in the theme readme.

On Thu, Aug 19, 2021 at 9:47 AM Daijiang Li @.***> wrote:

Not sure what happened. But when I try to create a brand new site with this theme. I got the following error:

blogdown::new_site(theme = "zwbetz-gh/cupper-hugo-theme")

― Creating your new site

| Installing the theme zwbetz-gh/cupper-hugo-theme from github.com

trying URL 'https://github.com/zwbetz-gh/cupper-hugo-theme/archive/master.tar.gz'

downloaded 7.1 MB

| Adding the sample post to /Users/dli30/Documents/test/content/post/2020-12-01-r-rmarkdown/index.en.Rmd

| Converting all metadata to the YAML format

Error: logged 1 error(s)

| Adding netlify.toml in case you want to deploy the site to Netlify

| Adding .Rprofile to set options() for blogdown

― The new site is ready

○ To start a local preview: use blogdown::serve_site(), or the RStudio add-in "Serve Site"

○ To stop a local preview: use blogdown::stop_server(), or restart your R session

► Want to serve and preview the site now? (y/n) y

Launching the server via the command:

/Users/dli30/Library/Application Support/Hugo/0.85.0/hugo server --bind 127.0.0.1 -p 4321 --themesDir themes -t cupper-hugo-theme -D -F --navigateToChanged

Error: Error building site: logged 1 error(s)

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/55#issuecomment-901978114, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7GJZC2RYRXNDVULKOTT5UKP3ANCNFSM5BE7RFOQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

daijiang commented 3 years ago

I have 0.85.0, which is higher than the minimal. My guess is that maybe some of recent commits caused this? I did not see the log info neither.

zwbetz-gh commented 3 years ago

Hard for me to debug without an error message, stack trace, or line number.

On Thu, Aug 19, 2021 at 9:51 AM Daijiang Li @.***> wrote:

I have 0.85.0, which is higher than the minimal. My guess is that maybe some of recent commits caused this? I did not see the log info neither.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/55#issuecomment-901981564, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7F6HOIJJZBDVYIQUUTT5ULAZANCNFSM5BE7RFOQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

daijiang commented 3 years ago

Can you create a new folder. cd to that folder, and use R to create a new site:

blogdown::new_site(theme = "zwbetz-gh/cupper-hugo-theme")

You should be able to reproduce this error.

zwbetz-gh commented 3 years ago

Pretend I'm a new R user. Walk me through from scratch how I would install the blogdown package, etc.

daijiang commented 3 years ago 
install.packages("blogdown")

If this theme is not for blogdown, why it supports Rmd files?

zwbetz-gh commented 3 years ago

Could be coincidence. You would have to ask the blogdown author.

On Thu, Aug 19, 2021 at 11:52 AM Daijiang Li @.***> wrote:

install.packages("blogdown")

If this theme is not for blogdown, why it supports Rmd files?

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/55#issuecomment-902078725, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7CXCX4UUKOZKCMJYTTT5UZGVANCNFSM5BE7RFOQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

yihui commented 3 years ago 
Error: Error building site: logged 1 error(s)

For the record, the problem was posted at https://github.com/rstudio/blogdown/issues/649 and I have answered the question.

zwbetz-gh commented 3 years ago

Nice detective work @yihui