ハッカーっぽいやつ作ってみた ～ コーディングを記録して動画風に再生する

はじめに

いつもの通り作りっぱなしなので、バグってるかもしれません。

デモ用

See the Pen CodingDemo by kob58im (@kob58im) on CodePen.

※デモのサンプルコードがミスっております。¹

配列作成用

CodePen上で開いたほうが使いやすいです。（リロードすれば消去できます（））

保存機能とかは無いので、ガチなコーディングはちゃんとしたエディタなりでやってくださいまし。

See the Pen CodeRecorder by kob58im (@kob58im) on CodePen.

textareaに入力された文字列について、更新イベントの前後の差分を強引に抽出して、編集履歴を出力するようにしてます。

お試し用

とりあえずC＃とJavaScriptを指定してあります。

See the Pen CodePlayer - for - C# by kob58im (@kob58im) on CodePen.

参考 - highlight.js

• highlight.jsを使う - Narito Blog
• highlight.jsを動的に使ってみた - CodePen - Qiita

参考 - 作成時にお世話になったところ

• JavaScriptで正規表現（文字列置換え編） - Qiita
• ブラウザから手軽にチェックできる正規表現テストツールまとめ
• Regulex：JavaScript Regular Expression Visualizer

1. Mainのところ、staticが抜けている。 ↩