JavaScriptのプログラムをブログで紹介する際、こんな感じで書いていました。

let sum = 0; for (let i = 0; i < array.length; i++) { sum += array[i]; } console.log(sum);

でも、最近はキーワードがハイライトされたコードを見ることが多いので、改善してみました。 let sum = 0; for (let i = 0; i < array.length; i++) { sum += array[i]; } console.log(sum); HTMLは、こんな感じに書きます <script type="module" src="https://js.sabae.cc/code-js.js"></script> <code-js> let sum = 0; for (let i = 0; i &lt; array.length; i++) { sum += array[i]; } console.log(sum); </code-js> 簡単ですね!

HTMLで使うタグを、ハイフン付きの名前であれば自由に拡張できるHTMLElementを使ったWebコンポーネント、便利ですね! 人気のフレームワークVue.jsのv-タグ、A-FRAMEのa-タグなどが有名です。


code-js
highlight.jsESモジュール化して、一番馴染みが深そうなVSCodeスタイルのcssと含めてcode-js.jsとして作りました。

Code for FUKUI でどんどん追加しているオープンソースなWebコンポーネント。細かいところ調整したい方はどんどんforkして活用ください。改善提案(プルリク)も歓迎です。

どんなタグがあると便利でしょう?
そういえば、VRタグとかいいですね!(サンドーム福井にてクリエイターズランド、開催中!内部の様子サンドーム福井 - VRふくい

links
- input-graph グラフ編集コンポーネントα
- input-table テーブル編集コンポーネント
- input-dates 複数日付入力コンポーネント
- mark-down Markdown表示コンポーネント
- csv-map 緯度経度付きCSVデータ地図表示コンポーネント
- csv-table CSVデータ表示コンポーネント

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS