Rails 애플리케이션에 구문 강조를 추가하는 방법은 크게 서버 측 처리와 클라이언트 측 처리로 나눌 수 있으며, WYSIWYG 에디터 통합 방안도 있습니다.
1. Commonmarker Gem 활용
Commonmarker는 구문 강조 스타일을 인라인으로 추가하여 별도의 라이브러리 없이 간편하게 구현할 수 있습니다.
-
Post모델에formatted_content메서드를 정의하여Commonmarker.to_html을 사용합니다. -
plugins: { syntax_highlighter: { theme: "base16-ocean.dark" } }옵션을 통해 테마를 지정합니다. -
path: Rails.root.join("app", "assets", "themes").to_s를 통해.tmtheme형식의 사용자 정의 테마를 추가할 수 있습니다.
2. Redcarpet과 Rouge 조합
Redcarpet과 Rouge는 Rails 개발자들이 가장 흔히 사용하는 구문 강조 스택입니다.
-
Redcarpet::Render::HTML을 상속받는HtmlRenderer클래스를 생성하고Rouge::Plugins::Redcarpet모듈을 포함시킵니다. -
Post모델의formatted_content메서드에서Redcarpet::Markdown.new(HtmlRenderer, { fenced_code_blocks: true }).render(content)를 호출합니다. -
테마 적용은
<% content_for :head do %><style><%= Rouge::Themes::Molokai.render %></style><% end %>와 같이 인라인으로 추가하거나,rougify스크립트를 통해 CSS 파일을 생성하여 링크할 수 있습니다.
3. Highlight.js 활용 (프런트엔드)
Highlight.js는 가장 인기 있는 프런트엔드 구문 강조 라이브러리입니다.
-
Post모델에formatted_plain메서드를 추가하여 Commonmarker로 구문 강조 없이 마크다운을 HTML로 파싱합니다. -
app/javascript/syntax_highlight.js파일에 Highlight.js를 임포트하고hljs.highlightElement(block)를 호출하여 코드 블록을 강조합니다. -
import hljs from "highlight.js/lib/core"와 같이 필요한 언어만 선택적으로 임포트하여 번들 크기를 최적화할 수 있습니다. -
CSS 번들링을 사용하는 경우
@import "highlight.js/styles/tokyo-night-dark.css"를application.tailwind.css에 추가합니다.
4. Rhino Editor 활용 (WYSIWYG)
Action Text 호환 WYSIWYG 에디터인 Rhino Editor는 TipTap과 Highlight.js를 기반으로 합니다.
-
Action Text 및 Active Storage를 설치하고
Post모델에has_rich_text :body를 추가합니다. -
Rhino Editor를 설치하고
app/javascript/rhino_editor.js에서lowlight및@tiptap/extension-code-block-lowlight를 사용하여 에디터 내에서 실시간 구문 강조를 구현합니다. -
rhino-before-initialize이벤트 리스너를 통해starterKitOptions와extensions를 커스터마이징합니다.
5. 적절한 접근 방식 선택
-
서버 측: 대부분의 경우 적합하며, Commonmarker, Redcarpet+Rouge(Pygments) 등이 사용됩니다.
-
프런트엔드: 실시간 강조, 혼합 프런트엔드 환경, 다양한 테마 선택 시 유리합니다. 단, 번들 크기 증가, 강조 깜빡임, 언어 지원 제한 등의 단점이 있습니다.