[ 📌文法] [ 🎨命令一覧]

[編集モード] なでしこさんのコードをカラフルなシンタックスハイライト付きで原稿用紙に表示したい！

アドベントカレンダー　25日目の記事用。エディタに書かれているなでしこのコードを取得して原稿用紙に描画し、鑑賞するというお遊びです。自身のプログラム冒頭で取り込んで（！『拡張プラグイン:genko.nako3』を取り込む。）実行し、「原稿用紙作成ボタン」を押してみてください！　カラフルなシンタックスハイライト付きでコードが原稿用紙に描画されます☆　色は「設定」ボタンから変更出来ます♪　ダウンロードはSVG画像です。／インデントに中黒、縦棒、罫線が使えることに気がついたので空白に追加。

＃なでしこのコードを原稿用紙に描画する。
！『https://n3s.nadesi.com/plain/wa.nako3』を取り込む。# DOM和スタイル
！『https://n3s.nadesi.com/plain/751.nako3』を取り込む。# ラジオボタン、グループ、DIV要素作成。
！『https://n3s.nadesi.com/plain/bunsyo-seikei.nako3』を取り込む。# 禁則処理。行揃え。
！『https://n3s.nadesi.com/plain/SVGplus.nako3』を取り込む。
!『https://n3s.nadesi.com/plain/1899.js』を取り込む。# AWAIT命令のプラグイン by てぃふと@うぇいく さん

＃母艦
変数 母艦は、DOM親要素。

＃原稿用紙親要素作成
　DIV要素作成して原稿用紙親要素に代入。
　原稿用紙親要素の「id」に「原稿用紙」をDOM属性設定。
　原稿用紙親要素にDOM親要素設定。

＃宣言
定数 原稿用紙行文字数は、20。
定数 原稿用紙行数は、20。
変数 整形済み執筆用原稿は、空。
変数 原稿用紙テキストは、空配列。
変数 原稿用紙現在頁は、1。
変数 原稿用紙総頁数は、1。
変数 原稿用紙情報は、空。
変数 原稿用紙設定は、{
  「紙色」:「#F8F4E6」,
  「罫色」:「#CD8C5C」,
  「筆色」:「#595857」,
  「書体」:「serif」,
  「文字余白」:6 }
変数 シンタックスハイライト情報は、空配列。
変数 カラーリング設定は、空辞書。

＃標準画面作成
　「原稿用紙作成」のボタン作成して、原稿用紙表示ボタンに代入。
　「原稿用紙非表示」のボタン作成して、原稿用紙非表示ボタンに代入。
　「設定」のボタン作成して、原稿用紙設定ボタンに代入。
　原稿用紙非表示ボタンの「非表示」にオンをDOM属性設定。
　改行作成。改行作成。
　DIV要素作成して、原稿用紙設定画面に代入。
　原稿用紙設定画面の「非表示」にオンをDOM属性設定。
　DIV要素作成して、原稿用紙表示画面に代入。
　原稿用紙表示画面の「非表示」にオンをDOM属性設定。

＃原稿用紙表示画面
　原稿用紙表示画面にDOM親部品設定。

＃＃ページめくり
　空のラベル作成して、原稿用紙現在頁表示ラベルに代入。
　「＜＜戻る」のボタン作成して、頁戻るボタンに代入。
　「　」のラベル作成。
　「進む＞＞」のボタン作成して、頁進むボタンに代入。
　改行作成。

＃＃外枠のSVGだけ先に作成。
　[0,0]のSVG親要素作成して、原稿用紙SVGに代入。
　原稿用紙SVGにSVG定義領域作成して、原稿用紙フォント指定に代入。
　原稿用紙SVGにSVGグループ作成して、原稿用紙描画域に代入。
　原稿用紙表示画面にDOM親部品設定。

＃＃情報表示
　改行作成。
　空のラベル作成して、原稿用紙情報欄に代入。
　改行作成。改行作成。改行作成。

＃＃ダウンロードボタン
　「ダウンロード：」のラベル作成。
　「このページ」のボタン作成して、原稿用紙ダウンロードボタンに代入。
　「　」のラベル作成。
　「全てのページ」のボタン作成して、原稿用紙全ダウンロードボタンに代入。
　改行作成。

＃オプション設定画面作成
　原稿用紙設定画面にDOM親部品設定。

＃＃色設定
原稿用紙色設定＝{
  "紙色":[["胡粉色","#FFFFFC"],["生成色","#FBFAF5"],["象牙色","#F8F4E6",1],["鳥の子紙","#FDFBDE"],["更紙","#F9F8E0"],["雪白","#FCFFFE"],["朧月","#FFFEF9"],["白桜","#FFFCFC"],["卯花色","#F7FCFE"],["桜色","#FEF4F4"],["白練","#F3F3F2"]],
  "罫色":[["江戸茶","#CD8C5C",1],["榛色","#BFA46F"],["利休色","#8F8667"],["桔梗鼠","#95949A"],["藤鼠","#A6A5C4"],["紅藤色","#CCA6BF"],["撫子色","#EEBBCB"],["鴇色","#F4B3C2"],["浅緋","#DF7163"],["東雲色","#F19072"],["杏色","#F7B977"],["淡黄","#F8E58C"],["若菜色","#D8E698"],["柳色","#A8C97F"],["老竹色","#769164"],["翡翠色","#38B48B"],["若緑","#98D98E"],["青碧","#478384"],["薄縹","#507EA4"],["浅縹","#84B9CB"],["新橋色","#59B9C6"],["勿忘草色","#89C3EB"]]
}。

原稿用紙色設定ラジオボタンは、空辞書。
  原稿用紙色設定を反復:
    原稿用紙色設定ラジオボタン[対象キー]は、空配列。
    対象と対象キーで、原稿用紙色設定ラジオボタン[対象キー]の色設定用ラジオボタン群作成。

＃＃筆色設定
原稿用紙筆色設定＝{
  "空白":[["漆黒","#0D0015"],["墨","#595857"],["薄墨色","#A3A3A2"],["霞色","#C8C2C6",1],["絹鼠","#DDDCD6"]],
  "コメント":[["漆黒","#0D0015"],["墨","#595857"],["薄墨色","#A3A3A2"],["苔色","#69821B",1],["緑","green"]],
  "文字列":[["漆黒","#0D0015"],["墨","#595857"],["深縹","#2A4073"],["栗色","maroon",1],["深緋","#C9171E"],["蜜柑色","#F08300"],["山吹色","#F8B500"]],
  "句読点":[["漆黒","#0D0015"],["墨","#595857",1],["薄縹","#507EA4"],["深縹","#2A4073"]],
  "助詞":[["漆黒","#0D0015"],["墨","#595857",1],["薄縹","#507EA4"],["深縹","#2A4073"],["栗色","maroon"],["深緋","#C9171E"],["苔色","#69821B"],["緑","green"]],
  "予約語":[["漆黒","#0D0015"],["墨","#595857"],["薄縹","#507EA4"],["深縹","#2A4073"],["牡丹色","#E7609E",1],["紫色",紫色]],
  "記号":[["漆黒","#0D0015"],["墨","#595857"],["薄縹","#507EA4"],["牡丹色","#E7609E",1],["紫色",紫色]],
  "終了記号":[["漆黒","#0D0015"],["墨","#595857"],["薄縹","#507EA4"],["牡丹色","#E7609E",1],["紫色",紫色]],
  "関数宣言":[["漆黒","#0D0015"],["墨","#595857"],["牡丹色","#E7609E",1],["紫色",紫色]],
  "数値":[["漆黒","#0D0015"],["墨","#595857"],["薄縹","#507EA4"],["深縹","#2A4073"],["牡丹色","#E7609E"],["紫色",紫色],["紅緋","#E83929",1],["赤色",赤色],["青色",青色]],
  "関数名":[["漆黒","#0D0015"],["墨","#595857"],["槿色","#775580"],["紫","#884898",1],["葡萄色","#522F60"],["紫紺","#460E44"],["青紫色","#7f00ff"]],
  "なし":[["漆黒","#0D0015"],["墨","#595857"],["薄縹","#507EA4",1],["深縹","#2A4073"],["濃藍","#0F2350"],["青色",青色]]
}

「筆色（シンタックスハイライト）」のグループ作成して、筆色設定グループに代入。
　改行作成。
　筆色設定グループの「幅」に「900px」をDOMスタイル設定。
　筆色設定グループにDOM親部品設定。

＃＃＃筆色配色設定
原稿用紙筆色配色セット＝{
  "漆黒（単色）":[{"空白":"漆黒","コメント":"漆黒","文字列":"漆黒","句読点":"漆黒","助詞":"漆黒","予約語":"漆黒","記号":"漆黒","終了記号":"漆黒","関数宣言":"漆黒","数値":"漆黒","関数名":"漆黒","なし":"漆黒"}],
  "墨（単色）":[{"空白":"墨","コメント":"墨","文字列":"墨","句読点":"墨","助詞":"墨","予約語":"墨","記号":"墨","終了記号":"墨","関数宣言":"墨","数値":"墨","関数名":"墨","なし":"墨"}],
  "標準カラー":[{"空白":"霞色","コメント":"苔色","文字列":"栗色","句読点":"墨","助詞":"墨","予約語":"牡丹色","記号":"牡丹色","終了記号":"牡丹色","関数宣言":"牡丹色","数値":"紅緋","関数名":"紫","なし":"薄縹"},1],
  "ｖ３貯蔵庫風":[{"空白":"霞色","コメント":"苔色","文字列":"深緋","句読点":"墨","助詞":"墨","予約語":"牡丹色","記号":"牡丹色","終了記号":"牡丹色","関数宣言":"牡丹色","数値":"青色","関数名":"墨","なし":"墨"}],
  "ｖ１黒配色風":[{"空白":"霞色","コメント":"薄墨色","文字列":"蜜柑色","句読点":"墨","助詞":"苔色","予約語":"薄縹","記号":"薄縹","終了記号":"薄縹","関数宣言":"牡丹色","数値":"牡丹色","関数名":"墨","なし":"墨"}],
  "ｖ１白配色風":[{"空白":"霞色","コメント":"苔色","文字列":"深縹","句読点":"薄縹","助詞":"栗色","予約語":"深縹","記号":"薄縹","終了記号":"薄縹","関数宣言":"牡丹色","数値":"深縹","関数名":"墨","なし":"墨"}]
}
　筆色配色設定ラジオボタン＝空配列。
　DIV要素作成して、筆色配色グループに代入。

＃＃＃個別詳細設定
　開閉＝「DETAILS」のDOM部品作成。
　開閉にDOM親要素設定。
　「SUMMARY」のDOM部品作成。
　それに「個別設定を開く」をテキスト設定。

原稿用紙筆色設定ラジオボタン＝空辞書。
　原稿用紙筆色設定を反復:
　　原稿用紙筆色設定ラジオボタン[対象キー]は、空配列。
　　対象と対象キーで、原稿用紙筆色設定ラジオボタン[対象キー]の筆色設定用ラジオボタン群作成。

＃＃＃筆色配色設定ラジオボタン作成
　筆色配色グループにDOM親部品設定。
　原稿用紙筆色配色セットを反復:
　　筆色配色設定ラジオボタン[対象キー]＝「筆色配色」で対象キーのラジオボタン作成。
　　筆色配色設定ラジオボタン[対象キー]の「マージン」に「10px 0 10px 10px」をDOMスタイル設定。
　　筆色配色設定ラジオボタン[対象キー]["タグ"]＝対象キー。
　　筆色配色設定ラジオボタン[対象キー]をクリックした時には:
　　　原稿用紙筆色配色セット[対象["タグ"]][0]に配色設定反映。
　　もし、対象[1]＝オンならば:
　　　筆色配色設定ラジオボタン[対象キー]の「チェック」にオンをDOM属性設定。
　　　対象[0]に配色設定反映。

＃＃フォント設定
原稿用紙書体設定＝[
  ["ZEN紅道","Zen Kurenaido","@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');",1],
  ["花鳥風月","花鳥風月B","https://snowdrops89.github.io/font/TAKAYA/katyouB.woff2"],
  ["春夏秋冬Ⅱ","春夏秋冬B","https://snowdrops89.github.io/font/TAKAYA/syunkaB.woff2"],
  ["手書き雑","851手書き雑フォント","https://snowdrops89.github.io/font/851/851tegaki_zatsu_085.woff2"],
  ["ふい字","ふい字","https://snowdrops89.github.io/font/HuiFont109/HuiFont109.woff2"],
  ["衡山毛筆","衡山毛筆フォント","https://snowdrops89.github.io/font/Musashi/KouzanMouhituFont.woff"],
  ["New Tegomin","New Tegomin","@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');"],
  ["Klee One","Klee One","@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');"]
 ]

原稿用紙設定画面にDOM親部品設定。
　「フォント」のグループ作成して、書体設定グループに代入。
　改行作成。
　書体設定グループの「幅」に「900px」をDOMスタイル設定。
　書体設定グループにDOM親部品設定。
　原稿用紙設定["書体"]のエディタ作成して、書体任意設定エディタに代入。
　書体任意設定エディタの「マージン」に「0 0 10px 0」をDOMスタイル設定。
　「　　　太さ：」のラベル作成。
　["普通","太く"]のセレクトボックス作成して、文字太さ設定に代入。
　文字太さ設定に「普通」をテキスト設定。
　「　　　文字余白：」のラベル作成。
　0から12まで1で6の数値入力欄作成して、文字余白設定に代入。
　文字余白設定の「幅」に「50px」をDOMスタイル設定。
　改行作成。
　原稿用紙書体設定ラジオボタン＝空配列。
　原稿用紙書体設定を反復:
　　原稿用紙書体設定ラジオボタン[対象キー]＝「書体」で対象[0]のラジオボタン作成。
　　原稿用紙書体設定ラジオボタン[対象キー]の「マージン」に「10px 0 0 10px」をDOMスタイル設定。
　　原稿用紙書体設定ラジオボタン[対象キー]["タグ"]＝対象キー。
　　もし、対象[3]＝オンならば、:
　　　原稿用紙書体設定ラジオボタン[対象キー]の「チェック」に「チェック」をDOM属性設定。
　　　書体任意設定エディタに「"{対象[1]}",serif」をテキスト設定。
　　原稿用紙書体設定ラジオボタン[対象キー]をクリックした時には、:
　　　書体任意設定エディタに「"{原稿用紙書体設定[対象["タグ"]][1]}",serif」をテキスト設定。
　原稿用紙設定画面にDOM親部品設定。

＃＃適用ボタン
　原稿用紙設定画面にDOM親部品設定。
　「この設定で原稿用紙作成」のボタン作成して、原稿用紙設定適用ボタンに代入。

＃＃ラジオボタン関数
●(色配列とグループ名でラジオボタン配列の)色設定用ラジオボタン群作成とは:
　親は、DOM親要素
　グループ名のグループ作成して、グループに代入。改行作成。
　グループの「幅」に「900px」をDOMスタイル設定。
　グループにDOM親部品設定。
　色配列を反復:
　　ラジオボタン配列[対象キー]＝グループ名で対象[0]のラジオボタン作成。
　　ラジオボタン配列[対象キー]の「マージン」に「10px 0 10px 10px」をDOMスタイル設定。
　　もし、対象[2]＝オンならば、ラジオボタン配列[対象キー]の「チェック」に「チェック」をDOM属性設定。
　　ラベル＝ラジオボタン配列[対象キー]のラジオボタンタイトル取得。
　　ラベルの「背景色」に対象[1]をDOMスタイル設定。
　　ラベルの「余白」に「2px 8px」をDOMスタイル設定。
　親にDOM親要素設定。

●(色配列とグループ名でラジオボタン配列の)筆色設定用ラジオボタン群作成とは:
　親は、DOM親要素。
　改行作成。
　　DIV要素作成して、グループに代入。
　グループにDOM親部品設定。
　ラベル名＝グループ名。
　もし、ラベル名＝「関数名」ならば、ラベル名＝「システム<BR>変数･関数」
　もし、ラベル名＝「なし」ならば、ラベル名＝「ユーザー<BR>変数･関数」
　ラベル名&「：」のラベル作成。
　それの「ボックス表示」に「inline-block」をDOMスタイル設定。
　それの「幅」に「6em」をDOMスタイル設定。

色配列を反復:
　　ラジオボタン配列[対象キー]＝グループ名で対象[0]のラジオボタン作成。
　　ラジオボタン配列[対象キー]の「マージン」に「0 0 0 10px」をDOMスタイル設定。
　　もし、対象[2]＝オンならば、ラジオボタン配列[対象キー]の「チェック」に「チェック」をDOM属性設定。
　　ラベル＝ラジオボタン配列[対象キー]のラジオボタンタイトル取得。
　　ラベルの「背景色」に対象[1]をDOMスタイル設定。
　　ラベルの「色」に白色をDOMスタイル設定。
　　ラベルの「余白」に「2px 8px」をDOMスタイル設定。
　親にDOM親要素設定。

●(ラジオボタン配列で項目の)ラジオボタン設定反映とは:
　ラジオボタン配列を反復:
　　変数 チェックは、対象の「チェック」をDOM属性取得。
　　もし、チェックがオンならば、:
　　　変数 色設定は、原稿用紙色設定[項目][対象キー]。
　　　原稿用紙設定[項目]＝色設定[1]。
　　　原稿用紙情報は、原稿用紙情報に「{項目}：{色設定[0]}({色設定[1]})　」を追加。

●(ラジオボタン配列で項目の)カラーリング設定反映とは:
　ラジオボタン配列を反復:
　　変数 チェックは、対象の「チェック」をDOM属性取得。
　　もし、チェックがオンならば、:
　　　変数 色設定は、原稿用紙筆色設定[項目][対象キー]。
　　　カラーリング設定[項目]＝色設定[1]。

●(配色セットに)配色設定反映とは:
　配色セットを反復:
　　番号は原稿用紙筆色設定[対象キー]の0で0から対象を表検索。
　　もし、番号＜0ならば、番号は1。
　　原稿用紙筆色設定ラジオボタン[対象キー][番号]の「チェック」にオンをDOM属性設定。

＃イベント
原稿用紙表示ボタンをクリックした時には、:
　原稿用紙設定適用。
　原稿用紙作成。
　
原稿用紙非表示ボタンをクリックした時には、:
　原稿用紙設定画面の「非表示」にオンをDOM属性設定。
　原稿用紙表示画面の「非表示」にオンをDOM属性設定。
　原稿用紙表示ボタンの「非表示」にオフをDOM属性設定。
　原稿用紙非表示ボタンの「非表示」にオンをDOM属性設定。
　原稿用紙設定ボタンの「非表示」にオフをDOM属性設定。

原稿用紙設定ボタンをクリックした時には、:
　原稿用紙設定画面の「非表示」にオフをDOM属性設定。
　原稿用紙表示画面の「非表示」にオンをDOM属性設定。
　原稿用紙表示ボタンの「非表示」にオフをDOM属性設定。
　原稿用紙非表示ボタンの「非表示」にオンをDOM属性設定。
　原稿用紙設定ボタンの「非表示」にオンをDOM属性設定。
　原稿用紙表示ボタンに「この設定で原稿用紙作成」をテキスト設定。

＃＃原稿用紙画面のイベント
頁進むボタンをクリックした時には、:
　もし、原稿用紙現在頁＜原稿用紙総頁数ならば、:
　　原稿用紙現在頁を１増やす。
　　原稿用紙現在頁-1を執筆。
　　原稿用紙現在頁表示ラベルに「{原稿用紙現在頁}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。

頁戻るボタンをクリックした時には、:
　もし、原稿用紙現在頁＞１ならば、:
　　原稿用紙現在頁を１減らす。
　　原稿用紙現在頁-1を執筆。
　　原稿用紙現在頁表示ラベルに「{原稿用紙現在頁}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。

原稿用紙ダウンロードボタンをクリックした時には、:
　ダウンロードファイル名作成して、ファイル名に代入。
　「{ファイル名}_{原稿用紙現在頁}.svg」で原稿用紙SVGをSVGダウンロード。

原稿用紙全ダウンロードボタンをクリックした時には、:
　JSZIP作成して、zipに代入。
　ダウンロードファイル名作成して、ファイル名に代入。
　頁数は、１。
　原稿用紙総頁数回:
　　頁数-1を執筆。
　　原稿用紙現在頁表示ラベルに「{頁数}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。
　　zipの「{ファイル名}_{頁数}.svg」に原稿用紙SVG["outerHTML"]を空でJSZIPファイル作成。
　　頁数を１増やす。
　BLOB＝zipからコンテンツBLOB生成。
　URL＝「URL.createObjectURL」を[BLOB]でJS関数実行。
　A＝「a」のDOM部品作成。# 仮のaタグ。
　Aの「download」にファイル名をDOM属性設定。
　Aの「href」にURLをDOM属性設定。
　Aの「click」を空でJSメソッド実行。
　DOM親要素からAをDOM子要素削除。# 消して終了。
　「window.URL.revokeObjectURL」を[URL]でJS関数実行。# 解放して終了。

●ダウンロードファイル名作成とは:
　ファイル名は、整形済み執筆用原稿[0][0]。
　不使用文字は、["¥","/",":","*","?",'"',"<",">","|","#","＃","※"]
　不使用文字を反復:
　　ファイル名は、ファイル名の対象を空に置換。
　ファイル名は、ファイル名の空白除去。
　もし、ファイル名が空ならば、ファイル名は「原稿用紙」。

＃＃設定画面のイベント
原稿用紙設定適用ボタンをクリックした時には、:
　原稿用紙設定適用。
　原稿用紙作成。

●原稿用紙設定適用とは:
　原稿用紙情報は、空。
　#色設定
　原稿用紙色設定ラジオボタンを反復:
　　対象で対象キーのラジオボタン設定反映。
　原稿用紙筆色設定ラジオボタンを反復:
　　対象で対象キーのカラーリング設定反映。
　#書体設定
　原稿用紙設定["書体"]＝書体任意設定エディタのテキスト取得。
　もし、それが空ならば、原稿用紙設定["書体"]＝「serif」
　文字太さ設定のテキスト取得。
　もし、それが「普通」ならば、「normal」にSVG文字太さ設定。
　もし、それが「太く」ならば、「bold」にSVG文字太さ設定。
　原稿用紙設定["文字余白"]＝文字余白設定のテキスト取得。
　原稿用紙書体設定ラジオボタンを反復:
　　変数 チェックは、対象の「チェック」をDOM属性取得。
　　もし、チェックがオンならば、:
　　　変数 [フォント名,書体,URL]＝原稿用紙書体設定[対象キー]。
　　　変数 フォーマットは、URLを「.」で区切って、それ[(それの要素数)-1]。
　変数 書体設定＝「<style>@font-face {波カッコ}font-family: "{書体}";src: url({URL}) format('{フォーマット}');{波カッコ閉じ}</style>」
　もし、(URLの1だけ文字左部分)＝「@」ならば、書体設定は、「<style>{URL}</style>」
　原稿用紙フォント指定に書体設定をHTML設定。
　原稿用紙情報は、原稿用紙情報に「フォント：{フォント名}」を追加。
　原稿用紙情報欄に原稿用紙情報をテキスト設定。

●原稿用紙作成とは:
　//テストから生原稿作成して生原稿に代入。
　ナデシコード取得して生原稿作成して、生原稿に代入。
　生原稿から原稿作成して、整形済み執筆用原稿に代入。
　生原稿を構文分割して改行削除して、分割後データに代入。
　分割後データからハイライト情報作成。

原稿用紙設定画面の「非表示」にオンをDOM属性設定。
　原稿用紙表示画面の「非表示」にオフをDOM属性設定。
　原稿用紙表示ボタンの「非表示」にオンをDOM属性設定。
　原稿用紙非表示ボタンの「非表示」にオフをDOM属性設定。
　原稿用紙設定ボタンの「非表示」にオフをDOM属性設定。
　原稿用紙表示ボタンに「原稿用紙作成」をテキスト設定。
　原稿用紙SVGから原稿用紙描画域をDOM子要素削除。
　原稿用紙描画。
　原稿用紙現在頁-1を執筆。
　原稿用紙表示画面の「非表示」にオフをDOM属性設定。

＃描画用データ作成
●ナデシコード取得とは:
　変数 コードは、「#nako3code」のテキスト取得。
　もし、（コードの1だけ文字左部分）＝「<」ならば、:
　　スイッチは、「editSwitch」のDOM要素ID取得。
　　スイッチの「click」を空でJSメソッド実行。
　　コードは、「#nako3code」のテキスト取得。
　　スイッチの「click」を空でJSメソッド実行。
　コードで戻る。

●(Sから)生原稿作成とは:
　変数 原稿はS。
　原稿は、原稿を改行で区切る。
　変数 行数は、原稿の要素数。
　行数回:
　　もし、原稿[行数-回数]が「/^[！!].*/g」に正規表現マッチならば、原稿の(行数-回数)を配列削除。
　原稿は、原稿を改行で配列結合。
　原稿は、原稿の「  」を「　」に置換。　※半角スペース２つ→全角スペース１つ。
　//原稿は、原稿の「　　」を「　」に置換。　※全角スペース２つ→全角スペース１つ。
　原稿は、原稿の「 」を「　」に置換。　※半角スペース１つ→全角スペース１つ。

●(Sから)原稿作成とは:
　変数 原稿はS。
　原稿は、原稿を全角変換。
　原稿は、原稿を原稿用紙行文字数で行揃えして、それを原稿用紙行数で頁分割。
　原稿用紙総頁数は、それの要素数。
　原稿用紙現在頁表示ラベルに「{原稿用紙現在頁}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。
　0.01秒待って、原稿を戻す。

●(分割後データから)改行削除:
　C＝0
　(分割後データの要素数)-1≧Cの間:
　　分割後データ[C][1]＝分割後データ[C][1]の改行を空に置換。
　　もし、分割後データ[C][0]＝「改行」ならば:
　　　分割後データのCを配列削除。
　　　C=C-1。
　　C=C+1。
　分割後データを戻す。

●(分割後データから)ハイライト情報作成:
　文字数データ＝空配列。
　整形済み執筆用原稿を反復:
　　pm=0。
　　対象を反復:
　　　pm＝pm+(対象の文字数)
　　pmを文字数データに配列追加。
　P＝0。
　文字数データを反復:
　　pm＝対象。m＝0。シンタックスハイライト情報[P]=空配列。
　　pm＞mの間:
　　　データ＝分割後データの0を配列切り取る。
　　　もし、m+(データ[1]の文字数)≦pmならば:
　　　　シンタックスハイライト情報[P]にデータを配列追加。
　　　　m=m+(データ[1]の文字数)。
　　　違えば、:
　　　　残り文字数＝pm-m。
　　　　[データ[0],(データ[1]の残り文字数だけ文字左部分)]をシンタックスハイライト情報[P]に配列追加。//配列の引数の順番問題！
　　　　分割後データの0に[データ[0],データ[1]の1から残り文字数だけ文字削除]を配列挿入。
　　　　抜ける。
　　　もし、(分割後データの要素数)＝0ならば、抜ける。
　　P=P+1。
　シンタックスハイライト情報を戻す。

＃描画
●原稿用紙描画とは:
　定数 行文字数は、原稿用紙行文字数。
　定数 行数は、原稿用紙行数。
　定数 上下余白は、50。
　定数 左右余白は、70。
　定数 マス幅は、26。
　定数 ルビ枠は、10。
　定数 版心は、32。
　定数 外枠線幅は、4。
　定数 内枠線幅は、2。
　定数 枠幅は、外枠線幅＋内枠線幅+1。
　定数 描画幅は、(マス幅＋ルビ枠)*行数+枠幅*2+版心。
　定数 描画高さは、枠幅*2＋マス幅*行文字数。
　定数 用紙幅は、左右余白*2+描画幅。
　定数 用紙高は、上下余白*2+描画高。

変数 紙色は、原稿用紙設定＠「紙色」
　変数 罫色は、原稿用紙設定＠「罫色」
　変数 筆色は、原稿用紙設定＠「筆色」
　変数 書体は、原稿用紙設定＠「書体」
　変数 文字余白は、原稿用紙設定＠「文字余白」

原稿用紙SVGの「幅」に用紙幅をSVG属性設定。
　原稿用紙SVGの「高さ」に用紙高さをSVG属性設定。
　原稿用紙SVGの「viewBox」に「0 0 {用紙幅} {用紙高さ}」をSVG属性設定。

原稿用紙描画域は、原稿用紙SVGにSVGグループ作成。
　原稿用紙描画域にDOM親部品設定。
　無色にSVG線色設定。紙色にSVG塗り色設定。
　[0,0,用紙幅,用紙高]へSVG四角描画。

# 外枠
　罫色にSVG線色設定。無色にSVG塗り色設定。4にSVG線太設定。「直線」にSVG破線パターン設定。
　[左右余白+外枠線幅/2,上下余白+外枠線幅/2,描画幅-外枠線幅,描画高さ-外枠線幅]へSVG四角描画。
　2にSVG線太設定。
　[左右余白+枠幅,上下余白+枠幅,描画幅-枠幅*2,描画高さ-枠幅*2]へSVG四角描画。

# マス目
　1にSVG線太設定。「点線」にSVG破線パターン設定。
　## 縦線
　x＝左右余白+枠幅＋マス幅。y＝上下余白+枠幅。y2＝上下余白+枠幅＋マス幅*行文字数。
　行数*2+1回:
　　もし、回数=1ならば、続ける。
　　[x,y]から[x,y2]までSVG線描画。※縦線
　　もし、回数＝行数+1ならば、x＝x＋版心。
　　もし、回数＜行数+1ならば、:
　　　もし、(回数%2＝1)ならば、x＝x＋マス幅。
　　　違えば、x＝x＋ルビ枠。
　　もし、回数＞行数+1ならば、:
　　　もし、(回数%2＝0)ならば、x＝x＋マス幅。
　　　違えば、x＝x＋ルビ枠。
　## 横線
　x＝左右余白+枠幅。y＝上下余白+枠幅。原稿用紙テキスト＝空配列。文字描画位置＝空配列。
　行数+1回。※版心の分をプラス
　　y＝上下余白+枠幅。
　　もし、回数＝行数/2+1ならば、:
　　　x=x+版心。続ける。※版心
　　もし、((回数≠1)かつ(回数＜行数/2+1))または(回数＞行数/2+1)ならば、x=x+(マス幅+ルビ枠)
　　### テキスト描画位置
　　行番号＝行数-回数。
　　もし、(回数＞行数/2+1)ならば、行番号＝行数+1-回数。
　　文字描画位置[行番号]＝[x+マス幅/2,y+文字余白/2]。
　　### 横線描画
　　※一番下は描画しない
　　行文字数-1回:
　　　y＝y+マス幅。
　　　[x,y]から[x+マス幅,y]までSVG線描画。※横線
　ここまで。

# 魚尾
　罫色にSVG塗り色設定。
　「直線」にSVG破線パターン設定。
　「{版心}px」にSVG文字サイズ設定。
　「sans-serif」にSVG文字フォント設定。
　[左右余白+枠幅+(マス幅+ルビ枠)*(行数/2),上下余白+枠幅+マス幅*3]に「︻」をSVG文字描画。
　[左右余白+枠幅+(マス幅+ルビ枠)*(行数/2),上下余白+枠幅+マス幅*(行文字数-3)]に「︼」をSVG文字描画。

# テキスト
　書体にSVG文字フォント設定。
　「{マス幅-文字余白}px」にSVG文字サイズ設定
　無色にSVG線色設定。筆色にSVG塗り色設定。
　行数回:
　　行＝回数-1。
　　原稿用紙テキスト[行]＝空配列。
　　行文字数+1回:
　　　列＝回数-1。
　　　原稿用紙テキスト[行][列]＝[（文字描画位置[行][0]）,（文字描画位置[行][1]+マス幅*列）]に空をSVG縦書き文字描画。
　　　//それの「文字間」に「{文字余白}px」をDOMスタイル設定。

●(ページ数を)執筆とは:
　原稿＝整形済み執筆用原稿[ページ数]。
　種別＝シンタックスハイライト情報[ページ数]を配列複製。
　原稿用紙行数回:
　　行＝回数-1。
　　もし、回数＞(原稿の要素数)ならば、此行＝空。
　　違えば、此行＝原稿[行]。
　　此行は此行を文字列分解。
　　原稿用紙行文字数+1回:
　　　列＝回数-1。
　　　もし、列≧(此行の要素数)ならば:
　　　　原稿用紙テキスト[行][列]に空をテキスト設定。
　　　違えば:
　　　　原稿用紙テキスト[行][列]の「塗り色」にカラーリング設定[種別[0][0]]をSVG属性設定。
　　　　原稿用紙テキスト[行][列]に此行[列]をテキスト設定。
　　　　種別[0][1]＝種別[0][1]の1から1だけ文字削除。
　　　　もし、（種別[0][1]の文字数）＝0ならば、:
　　　　　種別の0を配列削除。

＃母艦を変更
母艦にDOM親要素設定。
DIV要素作成して母艦に代入。
母艦の「id」に「母艦」をDOM属性設定。
母艦にDOM親要素設定。

#-------------------
＃TKIさんの「なでしこスクリプトをhtmlに変換」なでしこスクリプト分割部分。
※インラインインデントに変更
※インデントに中黒、縦線、罫線が使えるように空白を修正
# https://n3s.nadesi.com/id.php?2670
# MIT License Copyright 2023 TKI
# https://opensource.org/license/mit/
//------------------
●正規表現一致(AがBに):
　AをBで正規表現マッチ
　それがAと等しい

//正規表現の設定

//これの次は助詞かもしれないよリスト
次助詞チェックタイプ={}
次助詞チェックタイプ＠「文字列」=1　　//「あ」の
次助詞チェックタイプ＠「単語」=1　　　//対象の
次助詞チェックタイプ＠「終了記号」=1　//[1,1]の
//助詞→助詞　とか　改行→助詞　とか句読点→助詞　の並びはない

助詞一覧取得して、それを「|」で配列結合
助詞はそれ

//先頭にあればここで区切る
//　[\s\S]* は改行を含む
//　.*は改行を含まない
区切り位置候補は[]
区切り位置候補に["助詞",「/^({助詞})/」]を配列追加　//(ならば|だけ|の|で)に正規表現マッチ//次助詞なし
区切り位置候補に["改行",『/^[\r\n]+/』]を配列追加//次助詞なし
※インデントに中黒、縦線、罫線が使える（縦棒「｜\|」は記号にもあるので後に判定する）
区切り位置候補に["空白",『/^[　\s\t\r\n・\u2500-\u257F$]+/』]を配列追加//次助詞なし 
区切り位置候補に["コメント",『/^\/\*[\s\S]*?\*\//』]を配列追加　/*　*/　//次助詞なし
区切り位置候補に["コメント",『/^[#＃※].*/』]を配列追加　※ 改行まで　//次助詞なし
区切り位置候補に["コメント",『/^\/\/.*/』]を配列追加　　// 改行まで　//次助詞なし
区切り位置候補に["関数宣言","/^●.*?とは/"]を配列追加　//●関数名とは　//次助詞なし
区切り位置候補に["関数宣言","/^●[^\r\n#＃※/]*/"]を配列追加　//●　改行かコメント？まで　//次助詞なし
区切り位置候補に["関数宣言","/^関数[\s|　][^\r\n#＃※/]*/"]を配列追加　//関数(スペース)関数名　改行かスペースまで　//次助詞なし

区切り位置候補に["予約語","/^(もし|違えばもし|違えば|ここまで|。。。|💧|：|:)/"]を配列追加　//次助詞なし　※「\s*」があると予約語の直後に改行がある場合に改行がくっついてしまう（|の判定が正しく出来ない）ので消してみる
区切り位置候補に["句読点","/^[、。,]/"]を配列追加　//次助詞なし

区切り位置候補に["文字列",『/^「[\s\S]*?」/』]を配列追加　//「　」　//次助詞かも
区切り位置候補に["文字列",『/^\"[\s\S]*?\"/』]を配列追加　//"　""　//次助詞かも
区切り位置候補に["文字列",「/^『[\s\S]*?』/」]を配列追加　//『　』　//次助詞かも
区切り位置候補に["文字列",「/^\'[\s\S]*?'/」]を配列追加　//'　'　//次助詞かも
区切り位置候補に["終了記号",「/^[\]\}\)］）｝]+/」]を配列追加　//()の直後に助詞がくることがある　//装飾時は記号扱い　※全角閉じ括弧を追加

※原稿用紙で全角変換するための追加項目
区切り位置候補に["コメント",『/^／／.*/』]を配列追加　　// 改行まで　//次助詞なし
区切り位置候補に["コメント",『/^／＊[\s\S]*?＊／/』]を配列追加　/*　*/　//次助詞なし

//コメントより記号を後にチェックする（「//」「/* */」より「/」を後にチェックする）
記号一覧=""
記号一覧=記号一覧に『\=|\+|\/|\-|\*|\%|\^|\@|\<|\>|\&|\||\[|\]|$|$|\:|\{|\}|\!|』を追加
記号一覧=記号一覧に『＝|＋|／|－|＊|％|＾|＠|＜|＞|＆|｜|［|］|（|）|：|｛|｝|！|』を追加
記号一覧=記号一覧に『≠|≦|≧|×|÷』を追加
区切り位置候補に["記号",「/^({記号一覧})/」]を配列追加
//↑(記号一覧)+で大丈夫か？→だめ　例）A=[]//コメント

//おまけ　なでしこ1用　3の文法とバッティングしはじめたら消す
区切り位置候補に["関数宣言","/^[■▲][^\r\n#＃※/]*/"]を配列追加　//なでしこ1用　■グループ宣言・▲ジャンプ先
区切り位置候補に["関数名","/^・[^\r\n#＃※/～]*[～\r\n]?/"]を配列追加　//なでしこ1用　グループメンバ

//区切り位置候補=[ [タイプ名,正規表現] ,[タイプ名,正規表現] ,[タイプ名,正規表現]…]
//マッチ部分=scriptを正規表現で正規表現マッチ

//------------------
//単語+スペースや記号や助詞があれば単語部分を切り取る
他区切り=「/(.+?)(」　//(.+?)の部分が単語　抽出文字列[0]を使用する
他区切り=他区切りに「\s|　|\t|\r|\n|」を追加//空白
他区切り=他区切りに「、|。|,|$|」を追加//句読点
他区切り=他区切りに「#|＃|※|」を追加//コメント
他区切り=他区切りに「{記号一覧}|」を追加
他区切り=他区切りに「{助詞}」を追加
他区切り=他区切りに「)/」を追加
//他区切りをコンソール表示　//→ /(.+?)(\s|　|\t|\r|\n|、|。|,|$|\=|\+|\/|\-|ならば|だけ|の|で)/

//------------------
//区切った後、単語に対する処理用
//[タイプ名,正規表現]
単語タイプ=[]

//単位　数値としてあつかう
//https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2F%E6%95%B0%E5%80%A4&show#h80b6aa04
単位指定=「(円|ドル|元|歩|㎡|坪|度|℃|°|個|つ|本|冊|才|歳|匹|枚|皿|セット|羽|人|件|行|列|機|品|m|mm|cm|km|g|kg|t|px|dot|pt|em|b|mb|kb|gb)?」

単語タイプに["数値","/[0-9０-９\.]+[eEn]?[0-9０-９]*{単位指定}/"]を配列追加　//小数　000.000　n?はBigInt eは指数
単語タイプに["数値","/0x[0-9０-９a-fA-F]+n?{単位指定}/"]を配列追加 //十六進数 0xFFFF
単語タイプに["数値","/0[ob][0-9０-９]+n?{単位指定}/"]を配列追加//八進数、二進数

//「それ」は予約語一覧取得に入っていて、「対象」はシステム関数一覧取得に入っている。　対象は予約語にいれちゃう
予約語=[]
予約語=予約語一覧取得して、それを予約語に配列足す
予約語に「対象」を配列追加
予約語に「対象キー」を配列追加
//予約語に「」を配列追加　//足りなければここに追加
予約語を「文字数順」で配列カスタムソート
予約語を「|」で配列結合
単語タイプに["予約語","/({それ})/"]を配列追加　//→ "/(インデント構文|エラー監視|反復|それ|抜|続|戻)/"に正規表現マッチ

関数名一覧=[]
関数名一覧=システム関数一覧取得して、それを関数名一覧に配列足す
//関数名一覧に「」を配列追加　//足りなければここに追加
関数名一覧を「文字数順」で配列カスタムソート
関数名一覧を「|」で配列結合
単語タイプに["関数名","/({それ})/"]を配列追加　//→"/(文字列分割|文字削除|区切|切取|置換)/"に正規表現マッチ

//長い順　配列カスタムソート用
●文字数順(A,B):
　それは(Bの文字数)-(Aの文字数)

//
結果=[]
scriptは空
定数　配列型=TYPEOF(空配列) //たぶん"object"
変換中フラグはオフ

※出力を省き構文分割のみにする
//分割して結果に入れる
●(scriptを)構文分割:
　結果=[]
　もしscriptが空ならば戻る
　変数　無限ループ検知用=空
　変数　文頭助詞チェック=オフ
　変数　行頭空白チェック＝オフ
　永遠の間:
　　もしscriptが空ならば、抜ける
　　//ループチェック
　　もし無限ループ検知用がscriptならば:
　　　「無限ループの可能性があります」と言う
　　　
　　　抜ける
　　違えば:
　　　無限ループ検知用=script
　　
　　//ループごと[タイプ名,マッチ部分]を確定していく
　　変数　タイプ名は空
　　変数　マッチ部分は空

//文頭がマッチするかみる
　　//空白、コメント、
　　区切り位置候補を反復：
　　　変数　[type,正規表現]=対象

もしtypeが「助詞」ならば:
　　　　もし文頭助詞チェックでなければ:
　　　　　続ける
　　　
　　　マッチ部分=scriptを正規表現で正規表現マッチ
　　　
　　　//ｘもしマッチ部分が空ならば、続ける　//nullが返ってくるとしぬ
　　　もしマッチ部分===NULLならば、続ける
　　　もしTYPEOF(マッチ部分)=配列型ならば:
　　　//"object"ならば		※インラインインデント構文は「:」の後にはコメントも不可。
　　　　「正規表現マッチで配列が返っています({正規表現})」をコンソール表示
　　　　マッチ部分=マッチ部分[0]

※縦棒がインデントか「または」か。行頭に「または」はこない
　　　もし、（（マッチ部分＝「｜」）または（マッチ部分＝「|」））かつ（行頭空白チェック＝オン）ならば、type＝「空白」

もし!!マッチ部分ならば:
　　　　タイプ名はtype
　　　　//script=scriptのマッチ部分を空に単置換　//マッチ部分を消す
　　　　//[タイプ名,マッチ部分,正規表現]をコンソール表示

もし、タイプ名＝「空白」でなければ、行頭空白チェック＝オフ。
　　　　もし、タイプ名＝「改行」ならば、行頭空白チェック＝オン。※次は行頭

抜ける

//文頭がマッチしなければ、単語+なにかだと思う。
　　//（なにか……助詞とか空白とか記号とか）
　　もしタイプ名が空ならば:
　　　正規表現=他区切り
　　　マッチ部分=scriptを正規表現で正規表現マッチ
　　　
　　　もし!!マッチ部分ならば:
　　　　タイプ名は「単語」
　　　　マッチ部分=抽出文字列[0]　//なにかの手前（句読点、空白、助詞の手前部分）
　　　　
　　　　//例外処理
　　　　//「一致する間」を「一致する」「間」に分ける
　　　　もし（マッチ部分を「/(.*?[ぁ-ん])(間)$/」で正規表現マッチ）ならば:
　　　　　マッチ部分=抽出文字列[0]
　　　　違えば:
　　　　　//「10回」を「10」と「回」に分ける:
　　　　　もし（マッチ部分を「/(.+)(以上|以下|未満|超|回)$/」で正規表現マッチ）ならば:
　　　　　　マッチ部分=抽出文字列[0]
　　　　　　
　　//タイプ名とマッチ部分が確定
　　もしマッチ部分が空でなければ:
　　　//文字列・単語・終了記号)]} の後ろには助詞がくるかも。　文頭・助詞などの次には助詞はこない
　　　もし次助詞チェックタイプにタイプ名が辞書キー存在するならば:
　　　　文頭助詞チェックはオン
　　　違えば:
　　　　文頭助詞チェックはオフ
　　違えば:
　　　//もうない（文末の単語のみ）
　　　タイプ名=「単語」
　　　マッチ部分=script
　　
　　//単語が数値・予約語・関数名などならタイプを変更する
　　もしタイプ名が「単語」ならば:
　　　タイプ名=マッチ部分をタイプ名判定
　　結果に[タイプ名,マッチ部分]を配列追加　　　　　//↓結果　ここでつくる
　　script=scriptのマッチ部分を空に単置換　//単語部分を消す
　　
　結果を戻す。

//数値、予約語、関数名とマッチするか見る
//その判定時に送り仮名を削除して判定する
●タイプ名判定(txtを):
　もしtxtが空ならば、「なし」を戻す
　
　//「クリックした時」「等しく無い」　→　「クリック時」「等無」
　//「それ」「かなか判定」「べき乗」　→　「それ」「かなか判定」「べき乗」
　変数　送り仮名無しtxt = 英数半角変換((txtを「/^([ぁ-ん]*)/」で正規表現マッチ) & (txtの『[ぁ-ん]』を空に正規表現置換))
　
　//数値、予約語、関数名とマッチしていたらそのタイプを設定
　単語タイプを反復:
　　変数　[タイプ名,正規表現] = 対象
　　
　　もし送り仮名無しtxtが正規表現に正規表現一致するならば:
　　　タイプ名を戻す
　
　//該当なし
　「なし」を戻す
#-------------------
カラーリング設定＝空辞書。
カラーリング設定＠「空白」＝灰色
カラーリング設定＠「句読点」＝黒色
カラーリング設定＠「助詞」＝黒色
カラーリング設定＠「コメント」=「green」
カラーリング設定＠「文字列」=「maroon」
カラーリング設定＠「予約語」＝紫色　//条件分岐、反復、続ける　など
カラーリング設定＠「関数宣言」=紫色　//●関数宣言
カラーリング設定＠「記号」=紫色
カラーリング設定＠「終了記号」=紫色
カラーリング設定＠「数値」=赤色
カラーリング設定＠「関数名」=「#7f00ff」　//システム関数・変数
カラーリング設定＠「なし」=青色　//ユーザー変数
#-------------------

#------------------
＃てぃふと@うぇいくさんの「電子書籍(epub3)の作成」より抜粋。
# https://n3s.nadesi.com/id.php?1972
#------------------
ZIPとは変数＝NULL。
URL_JSZIPとは定数＝「https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js」
ライブラリ準備。
●ライブラリ準備とは
　URL_JSZIPを動的インポートをAWAIT
　ZIPはWINDOW["JSZip"]
ここまで。

●JSZIP作成とは
　『(function(JSZip){return new JSZip();})』を[ZIP]でJS関数実行で戻る
ここまで

●(ZIPのNAMEにDATAをOPTSで)JSZIPファイル作成とは
　ZIPの"file"を[NAME, DATA, OPTS]でJSメソッド実行
ここまで

●(zipから)コンテンツBLOB生成とは
　OPTSとは定数＝{
　　type:"blob",
　　mimeType: "application/zip",
　　compression: "DEFLATE",
　}
　contentとは変数＝zipからOPTSでJSZIP非同期生成をAWAIT
　contentで戻る
ここまで

●(ZIPからOPTSで)JSZIP非同期生成とは
　ZIPの"generateAsync"を[OPTS]でJSメソッド実行で戻る
ここまで

●(Sを)動的インポートとは
　『(function(s) {return import(s);})』を[S]でJS関数実行で戻る
ここまで
#------------------

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] なでしこさんのコードをカラフルなシンタックスハイライト付きで原稿用紙に表示したい！

素材のアップロード