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

Reducing ActiveRecord Queries to Speed Up Your Requests

In Rails, ActiveRecord is one of the things that makes the framework so enjoyable to use. It reads almost like natural language and lets you write database logic in a clean, Ruby-style way.But every line of Active Record still turns into real SQL beh...

Ruby on Rails

2025-10-06 09:52:56 +0700 · 2 mins read

Speed Up Independent Queries Using Rails load_async

When you're building a dashboard, it's common to fetch multiple, independent datasets. The page loading might be slow because it has to fetch all data to render a page. A common solution is using AJAX to load pieces of the dashboard, which is great, ...

Ruby on Rails

2025-10-16 23:07:15 +0700 · 7 mins read