cu-psych-computing / cu-psych-comp-tutorial

An intro to R and Python for psychology-oriented users, created and maintained by students of the Columbia University psychology department
https://cu-psych-computing.github.io/cu-psych-comp-tutorial/
17 stars 9 forks source link

Implement consistent color scheme for syntax highligting #76

Closed emilynakka closed 4 years ago

emilynakka commented 4 years ago

Currently, code within .Rmd files is highlighted using pandoc's "tango" color scheme (white background; black & multicolored text). Code within .ipynb files is highlighted using a different color scheme (black background; white & multicolored text). This does not need to be resolved before the F20 workshops, but it would be nice to make them consistent at some point!

monicathieu commented 4 years ago

A note on this one before I forget (NOT time-sensitive, in fact leaving this here for future reference whenever it's convenient):

I think this may be rooted in the Chroma syntax highlighting issue per #70. I think the Python tutorial code chunks are showing up with the monokai color scheme, which is the current highlighting scheme specified in config.toml. This means that Chroma highlighting is working for Python, but not for R. Aha!

We can confirm this by changing config.toml to use a different color scheme, re-rendering the site, and checking whether the highlighting scheme on the Python tutorials has changed. If it has, Chroma is indeed working.

I don't know how the Chroma plugin works under the hood, but it appears to work on .md files that have code chunks fenced out like

python.code("here")

with three-backtick-enclosed chunks, and the name of the language after the first set of backticks with no curly braces.

If we want Chroma highlighting to trigger for .rmd files as well I think we would need to change the file ending to .rmarkdown to have blogdown knit them to Markdown files, not all the way to html. That way, Hugo will see all the R tutorial outputs as Markdown files that it will apply its own formatting to, instead of fully rendered html files that should be left alone.

The one downside of this is that Hugo's md-to-html engine doesn't natively support MathJax like Pandoc's rmd-to-html engine does. The blogdown chapter linked above links to instructions for a MathJax workaround, so I think you can have MathJax with .rmarkdown files but it takes some additional setup.

We might also decide that the two different highlighting schemes are fine, and not worth the additional MathJax setup! Whatever works in the long run.

emilynakka commented 4 years ago

Ahh, that's it!! I've just replaced monokai with tango in config.toml in my local instance, and all tutorials are rendering with tango code highlighting. I know it's a kind of janky solution right now—specifying pandoc-style highlight: tango in _output.yml for RMarkdown files and specifying Chroma-style style = "tango" in config.toml for Python-generated Markdown files, but I like the idea of making this consistent even in this imperfect way for the tutorial. I will plan to bundle this Chroma / config.toml update in the Day 2 branch updates, unless you have any concerns with it.

Thank you again for solving this mystery!

monicathieu commented 4 years ago

Updating the Chroma highlighting theme to match the Pandoc theme is a good idea! That honestly does the job just fine since we won't need to be updating syntax highlighting schemes anytime soon once we pick one we like. You can slide it in on whatever update branch works for you 😄