How to add a custom Inline Code to Trix editor

Ruby on Rails

Frontend

2025-05-17 15:50:55 +0700 · 2 mins read

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

Modern JavaScript OOP Features: True Private Fields, Static Methods, and More

When I first started learning JavaScript, its object-oriented features felt like an afterthought. The language had objects and prototypal inheritance, but it was missing key features like true private fields and methods. That’s why many developers tu...

Frontend

2025-06-28 21:18:52 +0700 · 5 mins read

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

2025-07-17 14:50:21 +0700 · 4 mins read