애플리케이션 구축은 Tailwind CSS와 ESBuild를 사용하는 Rails 애플리케이션 생성부터 시작하며, Post 모델을 스캐폴딩하고 Commonmarker Gem을 설치합니다. Marksmith Markdown Editor를 통합하기 위해 Gem 및 JavaScript 패키지를 설치하고, Stimulus 컨트롤러에 등록하여 실시간 미리보기 기능을 활성화합니다. Commonmarker는 기본적으로 Marksmith의 렌더러로 사용될 수 있지만, 본 문서에서는 Marksmith::Renderer 클래스를 오버라이딩하여 Commonmarker의 강력한 기능을 직접적으로 시연합니다. 여기에는 GitHub Flavored Markdown의 다양한 기능(예: 취소선, 자동 링크, 이모지, 구문 강조, 테이블, 작업 목록, HTML 태그 필터링)이 포함됩니다.
Commonmarker의 구성은 to_html 또는 parse 메서드를 통해 이루어지며, 파싱, 렌더링, 확장 옵션 및 플러그인을 세밀하게 제어할 수 있습니다. parse 옵션은 스마트 구두점 변환, 태스크리스트 매칭 완화 등을 포함하며, render 옵션은 소프트 브레이크를 하드 브레이크로 변환하거나 안전하지 않은 HTML 렌더링 허용 여부 등을 설정합니다. Commonmarker는 기본적으로 20가지 확장을 제공하며, strikethrough, table, autolink, tasklist, shortcodes 등이 포함됩니다. 구문 강조 기능은 기본으로 제공되며, syntax_highlighter 플러그인을 통해 다양한 내장 테마를 선택하거나 TextMate의 .tmtheme 형식을 사용하여 사용자 정의 테마를 적용할 수 있습니다. 이는 외부 의존성 없이 코드 블록 스타일을 완벽하게 제어할 수 있게 합니다.
또한, GitHub Flavored Markdown의 알림(Callouts) 기능을 활성화하고 스타일링하는 방법을 상세히 설명합니다. alerts 확장을 통해 [!NOTE], [!WARNING] 등과 같은 구문을 특별한 시각적 요소로 렌더링할 수 있으며, Tailwind CSS와 SVG 아이콘을 활용하여 시각적으로 풍부한 알림을 구현하는 예시를 제공합니다. Commonmarker는 문서의 AST(Abstract Syntax Tree)를 탐색하여 렌더링된 마크다운의 출력을 사용자 정의할 수 있는 강력한 기능을 제공합니다. walk 및 each 메서드를 사용하여 노드를 조작함으로써, 링크의 프로토콜을 HTTPS로 강제하거나 외부 링크를 일반 텍스트로 렌더링하는 등의 고급 기능을 구현할 수 있습니다. AST 탐색만으로는 부족한 경우, Nokogiri Gem을 활용하여 생성된 HTML을 파싱하고 수정하는 방법을 제시합니다. 이를 통해 외부 링크에 rel="nofollow" 속성을 추가하거나 코드 블록에 ‘클립보드로 복사’ 버튼을 동적으로 삽입하는 기능을 구현할 수 있습니다.
마지막으로, 사용자 정의 임베드(Shortcode) 지원에 대해 다룹니다. {{shortcode/}}와 같은 자체 닫힘 숏코드 및 파라미터를 처리하기 위한 ShortcodeParser 클래스를 정의하고, 정규식을 사용하여 숏코드 문자열을 파싱하고 해당 partial을 렌더링하는 과정을 설명합니다. 또한, 숏코드가 없는 버전의 본문을 생성하는 render_without_shortcodes 메서드를 제공하여 마크다운의 이식성을 유지하는 방안을 제시합니다.