개발자 도구 · HTML WYSIWYG 편집기
마크다운과 WYSIWYG: 웹용 글쓰기에 대한 두 가지 대답
· 배경
HTML 인하 개발자 워크플로
HTML을 직접 작성하는 데 따른 마찰에 대한 두 가지 대응으로 경량 마크업과 시각적 편집을 비교하고, 각각이 출력 품질과 공동 작업에 부과하는 장단점을 비교합니다.
HTML을 직접 작성하고 싶어하는 사람은 없습니다. 두 접근 방식 모두 해결하는 공유 문제가 있습니다.
모든 단락, 링크 및 강조 표시에 대해 완전한 HTML 태그를 입력하려는 작성자는 거의 없습니다. Markdown과 WYSIWYG는 반대 방향에서 발생하는 마찰을 줄여줍니다. 하나는 경량 소스 구문을 노출하는 반면, 다른 하나는 작성자가 시각적 문서를 조작하고 나중에 생성된 마크업을 검사할 수 있도록 해줍니다.
두 접근 방식 모두 전환 경계를 제거하지 않습니다. 마크다운에는 방언에 대해 구성된 파서가 필요하고, 시각적 편집기에는 브라우저 DOM 및 허용된 출력에 대한 규칙이 필요합니다. 품질은 한 가지 방법이 항상 더 깨끗하거나 접근하기 쉬운 페이지를 만든다는 슬로건이 아니라 이러한 선택과 검토에 따라 달라집니다.
Markdown의 제한된 일반 텍스트 접근 방식 — 과거 날짜는 저장소 증거 외부에 있습니다.
Markdown은 파서가 HTML로 변환하는 구두점 규칙을 사용하여 일반 텍스트를 저장합니다. 제한된 문법은 종종 예측 가능한 요소를 생성하며 diff와 잘 작동합니다. 통합 문서는 날짜와 유래 이야기를 제공하지만 이 저장소에는 해당 기록에 대한 소스가 포함되어 있지 않으므로 이 기사에서는 이를 확인된 사실로 반복하지 않습니다.
예측 가능성은 방언과 확장에 따라 결정됩니다. 테이블, 작업 목록, 포함된 HTML 및 줄바꿈 규칙은 다를 수 있습니다. `.md` 파일만으로는 어떤 파서나 옵션이 페이지를 생성했는지 증명할 수 없습니다. 팀은 변환기를 고정하고 대표 문서를 테스트해야 합니다.
WYSIWYG의 내기: 결과 표시, 마크업 숨기기 — 시각적 접근 방식과 제공 대상을 요약합니다.
WYSIWYG는 편집 가능한 렌더링을 제공하며 브라우저가 선택, 입력 및 명령을 관리할 수 있도록 합니다. ToolAcre는 contenteditable과 execCommand를 사용한 다음 좁은 새니타이저를 통해 innerHTML을 실행하고 소스를 노출합니다. 작성자는 편집할 때마다 꺾쇠 괄호를 유지하지 않고도 시각적 보기와 텍스트 보기 사이를 이동할 수 있습니다.
이러한 편리함은 브라우저에 따른 변형을 허용합니다. 필터는 별칭 매핑, 프리젠테이션 제거 및 태그 균형 조정을 통해 변형을 줄이지만 사용자 정의 문서 모델을 생성하지는 않습니다. 따라서 소스 검사는 선택적 전문가 화면이 아닌 작업 흐름의 일부입니다.
출력 품질 비교 — Markdown의 제한적이고 깔끔한 HTML과 시각적 편집기의 가변 출력을 대조합니다.
Markdown의 제한된 구문은 원시 HTML이 비활성화된 경우 간결하고 일관된 어휘를 생성할 수 있습니다. 브라우저 명령은 라이브 트리에서 작동하므로 필터링하기 전에 시각적 편집기 출력이 더 다양할 수 있습니다. ToolAcre는 결과를 좁히지만 다른 편집기에서는 범위, 클래스 또는 인라인 스타일을 유지할 수 있습니다.
카테고리 고정관념이 아닌 실제 구성된 출력을 비교합니다. Markdown 확장은 복잡하거나 안전하지 않은 HTML을 내보낼 수 있으며, 엄격한 시각적 편집기는 작은 하위 집합을 내보낼 수 있습니다. 신뢰할 수 없는 기여를 게시하는 모든 시스템은 작성 구문에 관계없이 렌더링된 HTML을 삭제해야 합니다.
표현력은 선택한 Markdown 언어 및 편집기 허용 목록에 따라 다릅니다.
마크다운은 제목, 단락, 목록, 인용문, 코드 및 링크에 적합합니다. 보다 정교한 테이블, 중첩 구조 또는 프리젠테이션에는 방언별 구문 또는 내장 HTML이 필요할 수 있습니다. ToolAcre는 많은 의미 텍스트 요소를 지원하지만 테이블, 이미지, 스타일, 클래스 및 양식을 의도적으로 제외합니다.
관련 질문은 작성 방법이 대상 제약 조건에 따라 필요한 콘텐츠를 나타내는지 여부입니다. 어느 경로도 보편적으로 더 표현력이 뛰어나지는 않습니다. ToolAcre의 가시적 소스는 누락된 부분을 조기에 식별하는 데 도움이 되며, Markdown 미리 보기와 생성된 HTML 검사도 동일한 작업을 수행해야 합니다.
작업 예: 범용 기능 패리티가 아닌 지원되는 작은 하위 집합을 비교합니다.
두 시스템 모두에서 제목, 문단 2개, 강조 문구, 항목 3개 목록 및 공개 링크를 작성합니다. 각 파이프라인이 일반 정책을 적용한 후 h, p, em 또는 Strong, ul, li 및 a 요소를 비교합니다. 대상 계약에서 중요하지 않은 경우 들여쓰기 및 속성 순서를 무시합니다.
그런 다음 테이블이나 이미지 등 지원되지 않는 요구 사항 하나를 테스트합니다. ToolAcre는 이를 유지하지 않습니다. 마크다운 동작은 파서 구성에 따라 다릅니다. 거부 또는 연장 요구 사항을 기록하는 것이 기능 패리티를 강제하는 것보다 더 유용합니다. 구조적 차이가 편집 변경과 혼동되지 않도록 텍스트를 동일하게 유지하십시오.
여기서 다루지 않는 내용 — 특정 마크다운 버전, 정적 사이트 생성기 또는 편집기 플러그인
이 비교에서는 특정 Markdown 버전, 정적 사이트 생성기, 플러그인, 협업 플랫폼 또는 버전 제어 전략을 다루지 않습니다. 또한 속도를 벤치마킹하거나 모든 팀이 선호하는 선택을 주장하지도 않습니다. 이러한 결정은 저자, 검토 관행 및 출판 아키텍처에 따라 달라집니다.
ToolAcre의 살균제는 범용 보안 서비스가 아닙니다. 출력 하위 집합과 샌드박스는 로컬 검사를 향상시키지만, 적대적인 입력을 받아들이는 서버에는 여전히 적절한 파서 기반 새니타이저가 필요합니다. 마크다운 렌더링은 해당 경계를 넘어야 하는 HTML을 생성할 수도 있습니다.
요약: 이데올로기가 아닌 작성자가 선택 - 장단점을 요약하고 작성자가 시각적 편집이 필요하지만 여전히 HTML을 보고 싶어하는 경우 ToolAcre의 HTML WYSIWYG 편집기가 어떻게 적합한지 요약합니다.
이데올로기보다는 작가와 대상을 기준으로 선택하세요. 읽기 쉬운 일반 구문과 저장소 차이점에 익숙한 작성자는 Markdown을 선호할 수 있습니다. 직접적인 시각적 형식이 필요한 작가는 소스가 근처에 있는 WYSIWYG 표면에서 더 빠르게 작업할 수 있습니다. 둘 다 생성된 HTML을 검사하면 이점을 얻을 수 있습니다.
지원되는 의미 하위 집합이 적합하고 시각적 마크업이 중요한 경우 ToolAcre를 사용하세요. 소스 텍스트와 결정적 변환이 더 잘 맞는 경우 구성된 Markdown 파이프라인을 사용하세요. 지속 가능한 방법은 검토된 소스의 버전을 지정하고 변환 정책을 고정하고 최종 렌더링된 페이지를 테스트하는 것입니다.