Introducing our all new code syntax highlighter

posted by Ayush Newatia on June 1st, 2021
Chapter24 has had syntax highlighting for code since day 1. However it was flaky at best; it would try to guess the programming language of a snippet and almost always get it wrong. There was no way for a user to manually specify it either. 

No longer!!

We've added a code block element that lets you specify the programming language right in your text editor. It'll then apply GitHub flavoured syntax highlighting to the snippet before it's rendered for viewing!

The new code block editor


And this is what it looks like to a reader:

def drive_delorean
  puts "I'm sending you back, to the future!"
end

Under the hood this uses a library called Rouge to do the syntax highlighting. It supports over 200 programming languages so you're almost certainly covered no matter which language you like to code in.

And best of all, this component has been open sourced! You can just drop it into your Ruby on Rails app and level up your code editor!

Check out some of these code snippets from some of the more obscure languages we support!


++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.


-module(hello).
-export([hello_world/0]).

hello_world() -> io:fwrite("hello, world\n").


(let ((hello0 (lambda() (display "Hello world") (newline))))
  (hello0))


Transcript show: 'Hello World!'.



Subscribe to Chapter24 Product Blog


We'll send you an email every time a new post is published. We'll never spam you or sell your email address to third parties. Check out our privacy policy for details.