How to add a custom Inline Code to Trix editor

Ruby on Rails

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!

Published at 2025-05-17 15:50:55 +0700

Related blogs

Integer and String Enum in Rails

TL;DRFor General Use: I would lean towards using strings for enums due to their readability and maintainability benefits.For Performance-Critical Appl...

Ruby on Rails

2024-10-28 16:28:19 +0700

How to customize YJIT in the Rails app

In this post, we'll dive into what YJIT is, how to enable it in your Rails app, and how to monitor and configure it for optimal performance.What is YJ...

Ruby on Rails

2025-02-01 17:28:04 +0700