Feature/highlight

[sekigutihukuda-stack]

概要

ページ内のTechTermに登録されている単語をハイライトする機能を追加しました。

詳細

ページ内ハイライト

実装内容

ページ内にTechTermに登録されている単語がある場合、その単語を黄色でハイライトします。登録されている単語が一目でわかる一方、視認性が低下するのでハイライトのデザインや、ハイライトの切り替えには議論の余地があります。例えば、サイドパネルにハイライトの切り替えボタンを追加するなどしてハイライトを制御できるようにする、などです。

実装手順

dictionary.tsにfindAll()を追加しました。テキストを引数として、テキスト中に単語があるか検索し、単語の内容とテキスト中の単語の開始位置と終了位置を返すものです。これを用いてcontent.ts内にhighlight()およびinstallHighlightStyle()を追加しました。これらはページのhtmlを読み込み、CSS custom highlight APIを用いてページに含まれる専門用語にハイライトを付すものです。このhighlight()とinstallHighlightStyle()を用いてcontent.tsの5-13行目で、ページ読み込み時と更新時にハイライトを付しています。

ツールチップ（単語の説明のポップ）の消失条件の変更

実装内容

今まではツールチップにカーソルが乗っていると、単語からカーソルが外れたと判定されツールチップが消失していました。これを解消するため、ツールチップにカーソルが乗っている間はツールチップを表示させるようにしました。

実装手順

content.tsの30行目に判定を追加しました。

用語の追加

実装内容

JavaScriptやVisual Studio Code, Node.js等の約50個の単語を追加しました。