OrgPad logo

Programming Language Highlighting in OrgPad

25.04.2025 – Pavel Klavík, Kamila Klavíková

In OrgPad, we’ve improved how you insert code into cells—both inline and as standalone blocks. We support syntax highlighting for 40 different programming languages, from the most popular to specialized languages used in mathematics and science. We’ve converted all existing code to the new format and, wherever possible, added automatic language detection.

Programming Language Highlighting in OrgPad

#export, #programming languages, #update, #programming, #OrgPad, #improvements, #code

Inserting Code

In the editor, you’ll find the “Insert code” option under the green plus button. To insert inline code, use the keyboard shortcut CTRL+D (CMD+D on macOS), for example double pi = 3.141592653589793;. For longer snippets, it’s better to place them in a separate paragraph as a block of code. You can do this with SHIFT+CTRL+D (SHIFT+CMD+D on macOS). For example:

-- Find employees with above-average salary
SELECT name, salary
FROM employees
WHERE salary > (SELECT AVG(salary) FROM employees);

You can toggle between inline and block modes using the button in the panel. If you press ENTER inside inline code, it will convert to a block automatically.

To make code stand out more in the text, we’ve given it a light gray background. We’ve also reduced the font size so it fits better with the surrounding text. In block mode, you can now write up to 120 characters per line without a horizontal scrollbar appearing.

When you hover over a block of code, a copy button appears in the top-right corner. You can try it out right here. Copying code is handy when creating programming tutorials or preparing commands you need to run occasionally. For example, you might prepare these commands to create and start a new React app:

npx create-react-app my-app
cd my-app
npm start

Choosing a Programming Language

You can select the programming language for each code block so that syntax highlighting is applied automatically. OrgPad now supports 40 different languages, using the HighlightJS library. We cover everything from the most popular languages to less common functional and configuration ones. We’ve even added support for specialized languages like Lean, Modelica, and LaTeX, which are used in mathematics and science.

BashBash
C#C#
C# HTMLC# HTML
C/C++C/C++
CSSCSS
ClojureClojure
DartDart
DockerfileDockerfile
ElixirElixir
ExcelExcel
F#F#
GoGo
HTML/XMLHTML/XML
HaskellHaskell
JSONJSON
JavaJava
JavaScriptJavaScript
KotlinKotlin
LaTeXLaTeX
LeanLean
LispLisp
LuaLua
MATLABMATLAB
ModelicaModelica
OCamlOCaml
PHPPHP
PerlPerl
PowershellPowershell
PrologProlog
PythonPython
RR
RubyRuby
RustRust
SQLSQL
ScalaScala
SwiftSwift
TypeScriptTypeScript
Visual BasicVisual Basic
YAMLYAML

Missing a language you use? Let us know and we can add it.

When you click on a code block, the chosen language appears in the panel under the editor. The newly created code has no language selected yet. There is no automatic detection at the moment. You can change the language from a dropdown list, with the five most frequently used languages at the top. The list first shows languages already used in the current OrgPage, then those from your other OrgPages. Right now, highlighting isn’t applied inside the editor; it only appears after you close it. We plan to improve that in the future.

To avoid using the mouse, you can select the language entirely from the keyboard. Simply press CTRL+D (CMD+D on macOS) to open the language list, type the first few letters of its name, and press ENTER. The cursor returns to the code so you can continue typing. To make selecting the top three languages even faster, we’ve placed icons for them next to the language list. You can choose them immediately by pressing F2, F3, or F4.

If you select multiple code blocks in the editor at once, you can change their language in bulk. The same works for multiple selected cells with code.

Bulk change of programming language

We chose highlighting colors so they are distinct but not distracting. This matches OrgPad’s overall color palette, where no color overpowers the rest. We also tried to make colors consistent across languages—comments are gray, strings are green, and so on. You can see some highlighting examples for different languages here:

Prime testing in C++

The entire OrgPad is written in Clojure

SQL query for orders

Word frequency counting in Rust

HTML with embedded CSS

When we tested highlighting, we created an OrgPage with examples for all supported languages. We generated these examples with ChatGPT instructed to cover a variety of syntax. You can browse it here—but beware, it has 641 cells and may tax your computer’s performance.

Examples of code highlighting for various programming languages

Improved Code Editing

We’ve also enhanced working with code in the editor. Indentation is two spaces, inserted with TAB. BACKSPACE on an indentation deletes two spaces at once. And ENTER creates a new line with the same indentation.

Within code, you can now use basic formatting—bold, italic, strikethrough, superscript, subscript, and highlighting. That’s great for emphasizing parts of your code in tutorials or documentation. You can also insert hyperlinks and images directly into code blocks.

We perform stricter hyperlink detection in code than in regular text: hyperlinks must start with a protocol (http://, https://, or ftp://) or with www. to be auto-detected. You can still insert hyperlinks manually. For example, in this code the references to tldCounts.com and tldCounts.net aren’t correctly auto-detected:

// “com” and “net” are just property names here
const tldCounts = { com: 120, net: 45 };
console.log(tldCounts.com, tldCounts.net);

You can also include mathematical notation in code blocks. That is especially useful for commenting on mathematical functions and calculations. For instance, you can annotate a function that computes the length of an input vector with a clear mathematical formula. When you copy it, formulas are converted to LaTeX.

A function for computing norm with math formula in documentation

We’ve improved how code is handled when you paste it or drag it in. If the source HTML or Markdown includes language information, the code is highlighted automatically—for example, when copying from ChatGPT. We have corrected pasting from GitLab and also fixed many earlier bugs. If you paste multi-line text into an inline code, it now automatically converts to a block one.

Converting Existing Code

At the same time, we’ve gone through all existing code in OrgPad and converted it to the new format. In some older cells, a monospaced font was used instead, because that’s how code was created in the old editor. OrgPad contained about 10,000 unique codes.

Classifying that much code by hand is virtually impossible. Fortunately, artificial intelligence was able to help us with it. To ensure your data stays private, we ran a local open-source LLM (Qwen 2.5 14B) on our MacBook Pro with an M1 chip. It put the computer through its paces, but we obtained a rough breakdown by language.

We then spent several days refining this classification, running various interactive programming sessions in a Clojure REPL. Throughout, we took every precaution to keep your data completely private—our only goal was to correct the detected programming language.

Our list of supported languages kept growing as we went. For example, OrgPad had quite a bit of embedded Excel code. Interestingly, there wasn’t a single Pascal snippet in OrgPad. Back when I was studying, Pascal was one of the teaching languages at schools. Today it’s apparently been entirely replaced by Python, JS, and other newer languages.

As of April 2025, OrgPad contains over 66,000 code entries, about 14,000 of which have no language selected. Here’s what the distribution of the most-used programming languages looks like:

LanguageCountPercentage
#1
PythonPython
25,13448.69 %
#2
BashBash
19,10337.01 %
#3
JavaJava
1,1862.30 %
#4
ClojureClojure
1,0542.04 %
#5
C#C#
8091.57 %
#6
HTML/XMLHTML/XML
5661.10 %
#7
SQLSQL
5281.02 %
#8
JavaScriptJavaScript
4830.94 %
#9
C/C++C/C++
3940.76 %
#10
CSSCSS
2940.57 %

The dominance of Python and Bash comes down to the awesome Python map Thu Vu put together for her YouTube video How I Would Learn Python FAST (if I could start over). The video is fantastic, and I completely agree that the best way to learn programming is by working on real projects. I learned everything about coding that way—after all, OrgPad is the first web app I have ever built. When I started working on it six years ago, I knew next to nothing about how the web or browsers worked. By tackling real problems, I gradually deepened my understanding. Because that map is such a great learning resource for Python, hundreds of people made their own copies, which in turn massively boosted the number of Python and Bash snippets in OrgPad. Even without that map, though, Python and Bash would still be the top two languages.

Right now, the fourth most-used language is Clojure. If you haven’t encountered it yet, it’s a great programming language. OrgPad itself is built entirely in Clojure, and I even created an interactive Clojure tutorial right inside OrgPad a while back. I talk about its benefits in my video on web app development. Since we use OrgPad to plan its own development, there’s a ton of Clojure code living in our OrgPages. But it’s not just us—experienced senior developers who value OrgPad’s visualization and freedom also use it to simplify solving their complex problems.