0%
Reading Settings
Font Size
18px
Line Height
1.5
Letter Spacing
0.01em
Font Family
Table of contents

How to add a custom Inline Code to Trix editor
Ruby on Rails
Ruby on Rails
Frontend
Frontend

Lately, I’ve been improving the writing experience in my Rails app, and something kept bugging me: I wanted a way to add inline code formatting in the Trix editor, just like those snippets you see on blogs and documentation sites.
Turns out, Trix doesn’t have this out of the box. So here’s how I went about adding an inline code button. If you’re dealing with a similar feature, or a custom Trix toolbar button, read on!
1. Allowing the New Tag in Rails
Rails’ default sanitize helper would strip out unknown tags like <inline-code>. To prevent that, add this code to the initializer:
// language: ruby # config/initializers/action_text.rb Rails.application.config.after_initialize do ActionView::Base.sanitized_allowed_tags.add("inline-code") end
2. Update the JavaScript
We have to add an <inline-code> option to Trix and add a new button to the Trix Toolbar
// language: javascript import "trix"; import "@rails/actiontext"; document.addEventListener("trix-before-initialize", () => { // Make sure Trix keeps inline-code tags // Ref: https://github.com/basecamp/trix?tab=readme-ov-file#html-sanitization Trix.config.dompurify.ADD_TAGS = ["inline-code"]; // Add inline-code tag Trix.config.textAttributes.inlineCode = { tagName: "inline-code", inheritable: false, parser: function (element) { return element.tagName.toLowerCase() === "inline-code"; }, }; }); // Add a new button to the Trix Toolbar document.addEventListener("trix-initialize", function (event) { const toolbar = event.target.toolbarElement; if (!toolbar.querySelector(".trix-button--icon-inline-code")) { const group = toolbar.querySelector(".trix-button-group--text-tools"); if (group) { group.insertAdjacentHTML( "beforeend", `<button type="button" class="trix-button trix-button--icon" data-trix-attribute="inlineCode" title="Inline Code" tabindex="-1" aria-label="Inline Code" > <svg width="22px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M7 8L3 11.6923L7 16M17 8L21 11.6923L17 16M14 4L10 20" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button>` ); } } });
3. Style the new inline-code tag
Finally, add the CSS to customize the new inline-code tag. My favorite coding font is Fira Code, so I choose it as the default font-family. You can add this font using Google Fonts (https://fonts.google.com/specimen/Fira+Code)
// language: css .trix-content inline-code { font-family: "Fira Code", "Consolas", monospace !important; background: #f5f5f5; color: #c7254e; border-radius: 3px; padding: 2px 4px; font-size: 90%; }
4. Result

You can create a new tag to add a custom style in the Trix editor using the above instructions.
Happy coding!
Related blogs

JavaScript Immediately Invoked Function Expression
Today, we're diving into a common JavaScript pattern you've likely encountered: the Immediately Invoked Function Expression (IIFE). This pattern is used to manage scope and prevent global pollution.1. The ProblemConsider this simple script:// languag...
Frontend
Frontend


Safe Concurrent Updates in Rails with Locks and Atomic SQL
Some applications require handling concurrent updates, like buying concert tickets or transferring money. In these cases, data consistency and atomicity are critical. Any mistake can lead to overbooking, double-spending, or even lost money. This post...
Ruby on Rails
Ruby on Rails
