◆ WYSWYG は過剰で導入も手間
◆ markdown はユーザーに事前知識がいるし 色やサイズに向いてない
◆ 簡単なものを自作
  ◆ XML としてパース
  ◆ S タグに属性でスタイルを指定

ユーザーが textarea などに文章を入力するときに色を変えたり文字サイズを指定したりできるようにしたいです
ブログの記事投稿画面のようなものですが 必要な機能はもっと少ないです

ありがちなものだと WYSIWYG の導入でしょうか
直感的で便利なのですが 導入コストが大きめです
それにやりたいことに対して高機能すぎです
必要以上な機能がありすぎてそれらを無効にしたりなど色々設定したりも必要になります
あとライブラリが重ためです

もっと簡単なものだと markdown でしょうか
事前知識がある人向けなら これでいいのでしょうけど 対象のユーザーは markdown なにそれ?って人です
見出しやリストなら分かりやすいですが 慣れないと分かりづらい構文も多いです
一部記号はエスケープが必要になる場合もありますし 初心者に優しいとは言いづらいです

それに markdown は文書用なので見出しやリストや表などはありますが 色を変えたり文字サイズを変えたりという記法はないです
そういうことをするには HTML を書くことになります
メインは色や文字サイズの変更なので markdown が向いてるとも言えません

HTML 入力にするにも色々タグや属性があり ユーザーが覚えることが多くなりますし script などのタグは禁止するように制御が必要です
ネットの情報がそのまま使えると言ってもタグやスタイルごとに許可されてるかを考える必要があってイマイチです

もう自分で簡単なスタイルを設定できる記法を用意したほうがいいかなと思って作ることにしました

SXML

自作するにしても面倒なパースはしたくないですし 書く側的にも構文など考えることは減らしたいです
ということで XML 形式としました
DOMParser で扱えますし 書くときは <> だけ注意すればいいです

基本機能は S タグのみです
属性で色やサイズを指定します
HTML と区別のためも兼ねて大文字にしてます

黒色文字<S c="red">赤色文字</S>通常<S w="bold" s="20px">大きめ太字</S>通常

属性はこんな感じで CSS に対応してます

c ⇨ 色 (color)
s ⇨ サイズ (font-size)
w ⇨ 太さ (font-weight)
f ⇨ フォント (font-family)
d ⇨ 下線など (text-decoration)
a ⇨ 左・中央・右揃え (text-align)

スタイル指定のために S タグを書けるだけで HTML/XML というよりは markdown みたいなテキストをベースと考えてるので改行やスペースなどの空白文字はそのまま表示させます
ただしタグの内側の最初と最後だけ空白文字を削除してます

タグ定義

シンプルにしたかったので最初は S タグだけだったのですが 毎回同じスタイルを使うときに S タグに同じ属性を毎回書きたくなかったのでタグ定義もできるようにしました

<D scope="global" name="RED" c="#ff5050"/>
<RED>aaa</RED>

name 属性に指定した名前がタグに使えるようになります
scope 属性で使える場所を選べます

global ⇨ 全体
sibling ⇨ D タグの兄弟要素
children ⇨ D タグの子要素

前から順に処理するので global や sibling でも D タグの前には効果がありません

一応機能として作ったものの scope とか考えて使おうとするとタグのネストが前提になって HTML/XML みたいに構造化したフォーマットになっていきそうです
XML としてパースはするものの 普通のテキストのように書くことを想定してるものなので 一番最初に global でまとめて定義するくらいに使うのを推奨です

コメント

未定義タグは単純に無視する予定だったのですが タイプミスしても表示されないだけだとミスに気づきにくかったので未定義タグはエラーが出るようにしました
そうするとコメントを書きたいときに不便だったので C タグはコメントとして無視されるようにしています

タグ定義やコメントは機能としてありますが 短いものだと使う必要もないでしょうし 知らなくてもいいものという扱いで S タグだけを覚えれば使えるというふうにしてます

DEMO

試せるページ

左上にこのフォーマットでテキストを入力すると 左下のエリアに HTML で出力され その HTML のプレビュー表示が右側に表示されます