Jekyll syntax highlighting not producing correct markup

Question

My local environment isn't compiling my Jekyll site with the correct markup for Rouge syntax highlighting. So for something like

{% highlight javascript %}
<script>
 JavaScript code goes here
</script>
{% endhighlight %}

the markup I get after building is

<code class="language-javascript" data-lang="javascript">
 "<script>
  JavaScript code goes here
 </script>"
</code>

Instead of

<code class="language-javascript" data-lang="javascript">
 <span class="o"> < </span>
 <span class="nx"> script </span>
 <span class="o"> > </span>
 <span class="nx"> JavaScript code goes here </span>
 <span class="o"> < </span>
 <span class="sr"> /script </span>
 <span class="o"> > </span>
</code>

I have ruby 2.6.5p114 installed on my mac with jekyll 4.0.0 and

% rougify -v

confirms I have version 3.14.0 installed.

I get the same behaviour with my custom built theme and with a fresh blank jekyll site.

I've tried various setting in the _config;

kramdown:
  input: GFM
  syntax_highlighter: rouge

and

highlighter: rouge

I'm familiar with Jekyll but NOT Ruby so Im a little stuck on how to trouble shoot this.

EDIT: adding env settings and gem list. Note, I have played around a lot with the versions of of ruby and of gems. This is my setup at the time of this edit.

% gem env      
RubyGems Environment:
  - RUBYGEMS VERSION: 3.1.2
  - RUBY VERSION: 2.6.5 (2019-10-01 patchlevel 114) [x86_64-darwin19]
  - INSTALLATION DIRECTORY: /Users/arrancurran/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0
  - USER INSTALLATION DIRECTORY: /Users/arrancurran/.gem/ruby/2.6.0
  - RUBY EXECUTABLE: /Users/arrancurran/.rbenv/versions/2.6.5/bin/ruby
  - GIT EXECUTABLE: /usr/bin/git
  - EXECUTABLE DIRECTORY: /Users/arrancurran/.rbenv/versions/2.6.5/bin
  - SPEC CACHE DIRECTORY: /Users/arrancurran/.gem/specs
  - SYSTEM CONFIGURATION DIRECTORY: /Users/arrancurran/.rbenv/versions/2.6.5/etc
  - RUBYGEMS PLATFORMS:
    - ruby
    - x86_64-darwin-19
  - GEM PATHS:
     - /Users/arrancurran/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0
     - /Users/arrancurran/.gem/ruby/2.6.0
  - GEM CONFIGURATION:
     - :update_sources => true
     - :verbose => true
     - :backtrace => false
     - :bulk_threshold => 1000
  - REMOTE SOURCES:
     - https://rubygems.org/
  - SHELL PATH:
     - /Users/arrancurran/.rbenv/versions/2.6.5/bin
     - /usr/local/Cellar/rbenv/1.1.2/libexec
     - /Users/arrancurran/.rbenv/shims
     - /Users/arrancurran/.rbenv/bin
     - /usr/local/bin
     - /usr/bin
     - /bin
     - /usr/sbin
     - /sbin

% gem list     

*** LOCAL GEMS ***

activesupport (6.0.2.1)
addressable (2.7.0)
autoprefixer-rails (9.7.3)
bigdecimal (default: 1.4.1)
bundler (default: 2.1.2, 2.0.2)
cmath (default: 1.0.0)
coffee-script (2.4.1)
coffee-script-source (1.11.1)
colorator (1.1.0)
commonmarker (0.17.13)
concurrent-ruby (1.1.5)
csv (default: 3.0.9)
date (default: 2.0.0)
dbm (default: 1.0.0)
did_you_mean (1.3.0)
dnsruby (1.61.3)
e2mmap (default: 0.1.0)
em-websocket (0.5.1)
etc (default: 1.0.1)
ethon (0.12.0)
eventmachine (1.2.7)
execjs (2.7.0)
faraday (1.0.0)
fcntl (default: 1.0.0)
ffi (1.11.3, 1.11.2)
fiddle (default: 1.0.0)
fileutils (default: 1.1.0)
forwardable (default: 1.2.0)
forwardable-extended (2.6.0)
gdbm (default: 2.0.0)
gemoji (3.0.1)
github-pages (203)
github-pages-health-check (1.16.1)
html-pipeline (2.12.3)
html-proofer (3.15.0)
http_parser.rb (0.6.0)
i18n (1.8.2, 1.7.0, 0.9.5)
io-console (default: 0.4.7)
ipaddr (default: 1.2.2)
irb (default: 1.0.0)
jekyll (4.0.0, 3.8.5)
jekyll-autoprefixer (1.0.2)
jekyll-avatar (0.7.0)
jekyll-coffeescript (1.1.1)
jekyll-commonmark (1.3.1)
jekyll-commonmark-ghpages (0.1.6)
jekyll-data (1.1.0)
jekyll-default-layout (0.1.4)
jekyll-docs (4.0.0)
jekyll-feed (0.13.0)
jekyll-gist (1.5.0)
jekyll-github-metadata (2.12.1)
jekyll-include-cache (0.2.0)
jekyll-mentions (1.5.1)
jekyll-optional-front-matter (0.3.2)
jekyll-paginate (1.1.0)
jekyll-readme-index (0.3.0)
jekyll-redirect-from (0.15.0)
jekyll-relative-links (0.6.1)
jekyll-remote-theme (0.4.1)
jekyll-sass-converter (2.0.1, 1.5.2)
jekyll-seo-tag (2.6.1)
jekyll-sitemap (1.4.0)
jekyll-swiss (1.0.0)
jekyll-target-blank (2.0.0)
jekyll-theme-architect (0.1.1)
jekyll-theme-cayman (0.1.1)
jekyll-theme-dinky (0.1.1)
jekyll-theme-hacker (0.1.1)
jekyll-theme-leap-day (0.1.1)
jekyll-theme-merlot (0.1.1)
jekyll-theme-midnight (0.1.1)
jekyll-theme-minimal (0.1.1)
jekyll-theme-modernist (0.1.1)
jekyll-theme-primer (0.5.4)
jekyll-theme-slate (0.1.1)
jekyll-theme-tactile (0.1.1)
jekyll-theme-time-machine (0.1.1)
jekyll-titles-from-headings (0.5.3)
jekyll-watch (2.2.1)
jemoji (0.11.1)
json (default: 2.1.0)
kramdown (2.1.0, 1.17.0)
kramdown-parser-gfm (1.1.0)
liquid (4.0.3)
listen (3.2.1, 3.2.0)
logger (default: 1.3.0)
matrix (default: 0.1.0)
mercenary (0.3.6)
mini_portile2 (2.4.0)
minima (2.5.1)
minimal-mistakes-jekyll (4.16.5)
minitest (5.14.0)
multipart-post (2.1.1)
mutex_m (default: 0.1.0)
net-telnet (0.2.0)
nokogiri (1.10.7)
nokogumbo (2.0.2)
octokit (4.15.0)
openssl (default: 2.1.2)
ostruct (default: 0.1.0)
parallel (1.19.1)
pathutil (0.16.2)
power_assert (1.1.3)
prime (default: 0.1.0)
psych (default: 3.1.0)
public_suffix (4.0.3, 4.0.1, 3.1.1)
rainbow (3.0.0)
rake (13.0.1, 12.3.2)
rb-fsevent (0.10.3)
rb-inotify (0.10.1, 0.10.0)
rdoc (default: 6.1.2)
rexml (default: 3.1.9)
rouge (3.14.0, 3.13.0)
rss (default: 0.2.7)
ruby-enum (0.7.2)
ruby_dep (1.5.0)
rubygems-update (3.1.2)
rubyzip (2.0.0)
safe_yaml (1.0.5)
sass (3.7.4)
sass-listen (4.0.0)
sassc (2.2.1)
sawyer (0.8.2)
scanf (default: 1.0.0)
sdbm (default: 1.0.0)
shell (default: 0.7)
stringio (default: 0.0.2)
strscan (default: 1.0.0)
sync (default: 0.5.0)
terminal-table (1.8.0)
test-unit (3.2.9)
thread_safe (0.3.6)
thwait (default: 0.1.0)
tracer (default: 0.1.0)
typhoeus (1.3.1)
tzinfo (1.2.6)
unicode-display_width (1.6.0)
wdm (0.1.1)
webrick (default: 1.4.2)
xmlrpc (0.3.0)
yell (2.2.1)
zeitwerk (2.2.2)
zlib (default: 1.0.0)

`{% highlight ... %}` tag renders a `
` HTML element. But I don't see that in your post. — ashmaroli, Jan 10 '20 at 16:30

score 0 · Answer 1 · answered Jan 10 '20 at 16:35

0

Since you mentioned that your local environment is not rendering properly, does that mean your remote environment renders the site as expected?

If that is the case, try re-installing Jekyll and Rouge after uninstalling all existing versions:

gem uninstall jekyll --force
gem uninstall rouge --force

gem install jekyll

answered Jan 10 '20 at 16:35

ashmaroli

5,209
2
14
25

Hey, yes, the same project when compiled on GitHub Pages produces markup with the short name classes. for Example, GitHub Pages version of '.class' wrapped in a code block ouputs```.class``` and my local version outputs ```.class``` I could just write a style file for the long name classes but I;m hesitant to do that since this would be a fix for something that I don't actually fully understand. – Arran Jan 12 '20 at 14:05
Perhaps some other gem installed in your system is wreaking havoc. Perhaps posting the entire output of `gem env` and `gem list` here may help yield a solution. – ashmaroli Jan 12 '20 at 16:43
I don't see anything suspicious in your gem env and gem list.. Strange.. One other place to look is your Bundler configuration. Run `bundle config` to get the info. You need not post it here unless there is something there you don't understand.. – ashmaroli Jan 14 '20 at 05:49

Jekyll syntax highlighting not producing correct markup

1 Answers1