Marksmith 통합은 Rails 프로젝트 설정에서 시작됩니다. rails g scaffold products 및 rails active_storage:install 명령어로 기본 구조와 파일 업로드 기능을 준비합니다. 백엔드에서는 bundle add marksmith commonmarker를 통해 marksmith와 Markdown 변환을 위한 commonmarker 젬을 추가합니다.
프론트엔드 설정은 빌드 시스템에 따라 다릅니다. esbuild 사용 시 yarn add @avo-hq/marksmith를, importmaps 사용 시 bin/importmap pin @avo-hq/marksmith를 실행합니다. 이후 Marksmith 컨트롤러를 JavaScript 파일에 임포트하고 등록합니다.
뷰 계층에서는 app/views/layouts/application.html.erb에 Marksmith 스타일시트를 로드하고, 폼에서는 <%= marksmith_tag %> 및 <%= form.marksmith :description, rows: 4, class: [...] %>를 사용하여 특정 텍스트 영역에 Marksmith 에디터를 연결합니다.
저장된 Markdown 콘텐츠의 안전한 렌더링을 위해 뷰 파일에서 marksmithed 헬퍼로 Markdown을 HTML로 변환한 후, sanitize 헬퍼를 사용하여 허용된 태그와 속성만 남기고 잠재적인 위험 요소를 제거합니다. 이는 XSS 공격 방지 및 콘텐츠 안전성 보장에 필수적입니다.