開発者ツール · HTML WYSIWYG エディター
マークダウンと WYSIWYG: Web 用のライティングに対する 2 つの答え
· 背景
html マークダウン 開発者ワークフロー
軽量マークアップとビジュアル編集を、HTML を手動で記述する際の摩擦に対する 2 つの対応として比較し、それぞれが出力品質とコラボレーションに課すトレードオフを示します。
手作業で HTML を書きたい人はいない — まず、共通の問題が両方のアプローチで解決される
すべての段落、リンク、強調マーカーに完全な HTML タグを入力したいと考える作成者はほとんどいません。 Markdown と WYSIWYG は、反対方向からその摩擦を軽減します。1 つは軽量のソース構文を公開し、もう 1 つは作成者がビジュアル ドキュメントを操作し、生成されたマークアップを後で検査できるようにします。
どちらのアプローチでも変換境界は排除されません。 Markdown には方言用に構成されたパーサーが必要で、ビジュアル エディターにはブラウザ DOM と許可される出力のルールが必要です。品質は、1 つの方法で常にきれいなページやアクセスしやすいページを作成できるというスローガンではなく、それらの選択とレビューによって決まります。
Markdown の制約されたプレーンテキストのアプローチ — 過去の日付はリポジトリの証拠の外にあります
Markdown は、パーサーが HTML に変換する句読点規則を含むプレーン テキストを保存します。制約された文法は、多くの場合、予測可能な要素を生成し、差分とうまく連携します。ワークブックには日付と起源のストーリーが記載されていますが、このリポジトリにはその歴史に関するソースが含まれていないため、この記事では検証済みの事実としてそれを繰り返すことを避けています。
予測可能性は方言と拡張子に依存します。テーブル、タスク リスト、埋め込み HTML、改行ルールは異なる場合があります。 `.md` ファイルだけでは、どのパーサーまたはオプションがページを生成したかを証明できません。チームはコンバータを固定し、代表的なドキュメントをテストする必要があります。
WYSIWYG の賭け: 結果を表示し、マークアップを非表示にする — 視覚的なアプローチとそれが誰に提供されるかを要約する
WYSIWYG は編集可能なレンダリングを提供し、ブラウザーで選択、入力、コマンドを管理できるようにします。 ToolAcre は contenteditable と execCommand を使用し、狭いサニタイザーを通じて innerHTML を実行し、ソースを公開します。作成者は、編集のたびに山かっこを維持することなく、ビジュアル ビューとテキスト ビューの間を移動できます。
その利便性により、ブラウザーに依存する変更が許容されます。このフィルターは、エイリアスをマッピングし、プレゼンテーションを削除し、タグのバランスをとることで変動を減らしますが、カスタム ドキュメント モデルは作成しません。したがって、ソース検査はオプションのエキスパート画面ではなく、ワークフローの一部です。
出力品質の比較 - Markdown の制約されたクリーンな HTML とビジュアル エディターの可変出力を対比します。
Markdown の制約された構造は、生の HTML が無効になっている場合に、コンパクトで一貫した語彙を生成できます。ブラウザのコマンドはライブ ツリー上で動作するため、ビジュアル エディタの出力は、フィルタリングする前にさらに変化する可能性があります。 ToolAcre は結果を絞り込みますが、別のエディターではスパン、クラス、またはインライン スタイルが保持される場合があります。
カテゴリのステレオタイプではなく、実際に構成された出力を比較します。 Markdown 拡張機能は複雑または安全でない HTML を出力する可能性があり、厳密なビジュアル エディターは小さなサブセットを出力する可能性があります。信頼できない投稿を公開するシステムは、オーサリング構文に関係なく、レンダリングされた HTML をサニタイズする必要があります。
表現力は、選択した Markdown 方言とエディター許可リストに依存します
Markdown は、見出し、段落、リスト、引用、コード、リンクに快適です。より複雑なテーブル、入れ子構造、またはプレゼンテーションには、方言固有の構文または埋め込み HTML が必要になる場合があります。 ToolAcre は多くのセマンティック テキスト要素をサポートしていますが、テーブル、画像、スタイル、クラス、フォームを意図的に除外しています。
関連する質問は、そのオーサリング方法が宛先の制約の下で必要なコンテンツを表現しているかどうかです。どちらのパスも一般的に表現力が高いわけではありません。 ToolAcre の目に見えるソースは、その欠落を早期に特定するのに役立ちますが、Markdown プレビューと生成された HTML インスペクションも同様のことを行います。
実用的な例: ユニバーサル機能の同等性ではなく、サポートされている小さなサブセットを比較します
両方のシステムで、タイトル、2 つの段落、強調語句、3 つの項目のリスト、およびパブリック リンクを記述します。各パイプラインが通常のポリシーを適用した後、h、p、em または Strong、ul、li、および a 要素を比較します。宛先コントラクトで重要でない限り、インデントと属性の順序を無視します。
次に、テーブルや画像など、サポートされていないニーズを 1 つテストします。 ToolAcre はそれを保持しません。マークダウンの動作はパーサーの設定によって異なります。拒否または延長要件を記録することは、機能の同等性を強制するよりも役立ちます。構造的な違いが編集上の変更と混同されないように、テキストを同一にしてください。
これでカバーされないもの — 特定の Markdown フレーバー、静的サイト ジェネレーター、またはエディター プラグイン
この比較では、特定の Markdown フレーバー、静的サイト ジェネレーター、プラグイン、共同プラットフォーム、またはバージョン管理戦略はカバーされていません。また、スピードをベンチマークしたり、すべてのチームにとって好ましい選択肢であると主張したりするものでもありません。これらの決定は、著者、レビューの実践、および出版アーキテクチャによって異なります。
ToolAcre のサニタイザーはユニバーサル セキュリティ サービスではありません。その出力サブセットとサンドボックスによりローカル検査が向上しますが、敵対的な入力を受け入れるサーバーには依然として適切なパーサーベースのサニタイザーが必要です。マークダウン レンダリングでは、その境界を越える必要がある HTML を生成することもできます。
要点: イデオロギーではなく作成者によって選ぶ — トレードオフと、作成者が視覚的な編集が必要だが HTML を表示したい場合に ToolAcre の HTML WYSIWYG エディタがどのように適しているかをまとめています。
イデオロギーではなく、著者と目的地で選んでください。読みやすいプレーンな構文とリポジトリの差分に慣れているライターは、Markdown を好むかもしれません。直接的な視覚的な書式設定が必要なライターは、ソースが近くにある WYSIWYG サーフェスでより速く作業できる可能性があります。どちらも、生成された HTML を検査することで恩恵を受けます。
サポートされているセマンティック サブセットが適合し、目に見えるマークアップが重要な場合は、ToolAcre を使用します。ソース テキストと確定的変換がより適切に適合する場合は、構成された Markdown パイプラインを使用します。永続的な方法は、レビューされたソースをバージョン管理し、変換ポリシーを固定し、最終的にレンダリングされたページをテストすることです。