質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

2回答

1134閲覧

ハイライトのON・OFFを切り替えれるようにしたい

syen2501

総合スコア38

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2019/05/08 07:02

編集2019/05/09 09:14

私は、特定の語を文ごとにハイライトするというプログラムを作成しています。
それで、ハイライトした結果から、ユーザーが単語を指定してハイライトのON・OFFが
出来るように拡張をしようとしています。

方法としては、function decorateWord(boolean: boolean) の部分で「true」と「false」によって
ハイライトのON・OFFをしようとしているのですが上手くいかずに困っています。
初心者なので、出来れば方法等を教えて頂ければ幸いですので、宜しくお願い致します。

Typescript

1'use strict'; 2import * as vscode from 'vscode'; 3import * as fs from 'fs'; 4 5 6export function activate(context: vscode.ExtensionContext) { 7 console.log('Congratulations, your extension "semieditor" is now active!'); 8 const readsemiJson = JSON.parse(fs.readFileSync('C:\Users\神龍\specification\src\A_REF_扉開閉機能.json','utf8')); 9 10 // 特定の単語に色付け 11 const timeWordList = readsemiJson.時間; 12 const strengthTimeWordList = readsemiJson.強時間; 13 const futurePhraseWordList = readsemiJson.未来句; 14 const quantityWordList = readsemiJson.数量; 15 const numberOfHoursWordList = readsemiJson.時数ノ; 16 const strengthQuantityQualifiedWordList = readsemiJson.強数量修飾; 17 const numberOfTimeWordList = readsemiJson.回数; 18 19 const timeWords: vscode.DecorationOptions[] = []; 20 const strengthTimeWords: vscode.DecorationOptions[] = []; 21 const futurePhraseWords: vscode.DecorationOptions[] = []; 22 const quantityWords: vscode.DecorationOptions[] = []; 23 const numberOfHoursWords: vscode.DecorationOptions[] = []; 24 const strengthQuantityQualifiedWords: vscode.DecorationOptions[] = []; 25 const numberOfTimeWords: vscode.DecorationOptions[] = []; 26 const dependencyRelationWords: vscode.DecorationOptions[] = []; 27 28 var timeCount = 0; 29 var strengthtimeCount = 0; 30 var futurephraseCount = 0; 31 var quantityCount = 0; 32 var numberofhoursCount = 0; 33 var strengthquantityqualifiedCount = 0; 34 var numberoftimeCount = 0; 35 36 //child -> parent(値域) semiについて 37 function fromObjecttoRange(WordList: any,foundWordList: vscode.DecorationOptions[],dependencyRelationList: vscode.DecorationOptions[],Count: number){ 38 const activeEditor = vscode.window.activeTextEditor; 39 const text = activeEditor.document.getText(); //ドキュメント取得 40 41 // 取得したテキストを改行ごと(文章)に分割する 42 var textArray = text.split(/\r\n|\r|\n/); 43 44 if(WordList.length > 0){ 45 for(var i = 0; i < WordList.length; i++){ 46 const word = WordList[i].split('=>'); 47 const parentword = word[0]; 48 const rangeword = word[1]; 49 var offSet = 0; 50 for(var j = 0; j < textArray.length; j++){ 51 if(textArray[j] !== ''){ 52 if(textArray[j].search(rangeword) !== -1 && textArray[j].search(parentword) !== -1){ 53 const startPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword)); 54 const endPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword) + rangeword.length); 55 const decoration = { range: new vscode.Range(startPos, endPos) }; 56 foundWordList.push(decoration); 57 58 const related_startPos = activeEditor.document.positionAt(offSet + textArray[j].search(parentword)); 59 const related_endPos = activeEditor.document.positionAt(offSet + textArray[j].search(parentword) + parentword.length); 60 const related_decoration = { range: new vscode.Range(related_startPos, related_endPos) }; 61 dependencyRelationList.push(related_decoration); 62 } 63 if(textArray[j].search(rangeword) !== -1 && parentword === 'なし'){ 64 const startPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword)); 65 const endPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword) + rangeword.length); 66 const decoration = { range: new vscode.Range(startPos, endPos) }; 67 foundWordList.push(decoration); 68 } 69 } 70 //改行の長さも加算している 71 offSet += textArray[j].length + 2; 72 Count++; 73 } 74 } 75 return {foundWordList,dependencyRelationList,Count}; 76 } 77 } 78 79 //値域と修飾語をハイライト 80 function decorateWord(boolean: boolean) { 81 const activeEditor = vscode.window.activeTextEditor; 82 83 //時間 84 fromObjecttoRange(timeWordList,timeWords,dependencyRelationWords,timeCount); 85 //強時間 86 fromObjecttoRange(strengthTimeWordList,strengthTimeWords,dependencyRelationWords,strengthtimeCount); 87 //未来句 88 fromObjecttoRange(futurePhraseWordList,futurePhraseWords,dependencyRelationWords,futurephraseCount); 89 //数量 90 fromObjecttoRange(quantityWordList,quantityWords,dependencyRelationWords,quantityCount); 91 //時数ノ 92 fromObjecttoRange(numberOfHoursWordList,numberOfHoursWords,dependencyRelationWords,numberofhoursCount); 93 //強数量修飾 94 fromObjecttoRange(strengthQuantityQualifiedWordList,strengthQuantityQualifiedWords,dependencyRelationWords,strengthquantityqualifiedCount); 95 //回数 96 fromObjecttoRange(numberOfTimeWordList,numberOfTimeWords,dependencyRelationWords,numberoftimeCount); 97 98 activeEditor.setDecorations(timeMarkerDecoration,timeWords); 99 activeEditor.setDecorations(strengthTimeMarkerDecoration,strengthTimeWords); 100 activeEditor.setDecorations(futurePhraseMarkerDecoration,futurePhraseWords); 101 activeEditor.setDecorations(quantityMarkerDecoration,quantityWords); 102 activeEditor.setDecorations(numberOfHoursMarkerDecoration,numberOfHoursWords); 103 activeEditor.setDecorations(strengthQuantityQualifiedMarkerDecoration,strengthQuantityQualifiedWords); 104 activeEditor.setDecorations(numberOfTimesMarkerDecoration,numberOfTimeWords); 105 activeEditor.setDecorations(dependencyRelation,dependencyRelationWords); 106 } 107 108 context.subscriptions.push(vscode.commands.registerCommand('extension.color', () => { 109 vscode.window.showInformationMessage("Color Range Word"); 110 decorateWord(true); 111 })); 112 113 context.subscriptions.push(vscode.commands.registerCommand('extension.highlightOFF', () => { 114 vscode.window.showInformationMessage("HighLight OFF"); 115 decorateWord(false); 116 })); 117 118 //時間に色付け 119 const timeMarkerDecoration = vscode.window.createTextEditorDecorationType({ 120 'borderWidth': '1px', 121 'borderRadius': '2px', 122 'borderStyle': 'solid', 123 // 'backgroundColor': 'rgba(255, 0, 0, 0.3)', 124 'backgroundColor': 'rgba(128, 128, 0, 0.3)', 125 // 'color':'red' 126 'color':'orange' 127 }); 128 129 //強時間に色付け 130 const strengthTimeMarkerDecoration = vscode.window.createTextEditorDecorationType({ 131 'borderWidth': '1px', 132 'borderRadius': '2px', 133 'borderStyle': 'solid', 134 // 'backgroundColor': 'rgba(0, 0, 255, 0.3)', 135 'backgroundColor': 'rgba(128, 128, 0, 0.3)', 136 // 'color':'blue' 137 'color':'orange' 138 }); 139 140 //未来句に色付け 141 const futurePhraseMarkerDecoration = vscode.window.createTextEditorDecorationType({ 142 'borderWidth': '1px', 143 'borderRadius': '2px', 144 'borderStyle': 'solid', 145 // 'backgroundColor': 'rgba(0, 255, 0, 0.3)', 146 'backgroundColor': 'rgba(128, 128, 0, 0.3)', 147 // 'color':'lightgreen' 148 'color':'orange' 149 }); 150 151 //数量に色付け 152 const quantityMarkerDecoration = vscode.window.createTextEditorDecorationType({ 153 'borderWidth': '1px', 154 'borderRadius': '2px', 155 'borderStyle': 'solid', 156 // 'backgroundColor': 'rgba(255, 255, 0, 0.3)', 157 'backgroundColor': 'rgba(128, 128, 0, 0.3)', 158 // 'color':'yellow' 159 'color':'orange' 160 }); 161 162 //時数ノに色付け 163 const numberOfHoursMarkerDecoration = vscode.window.createTextEditorDecorationType({ 164 'borderWidth': '1px', 165 'borderRadius': '2px', 166 'borderStyle': 'solid', 167 // 'backgroundColor': 'rgba(0, 255, 255, 0.3)', 168 'backgroundColor': 'rgba(128, 128, 0, 0.3)', 169 // 'color':'lightblue' 170 'color':'orange' 171 }); 172 173 //強数量修飾に色付け 174 const strengthQuantityQualifiedMarkerDecoration = vscode.window.createTextEditorDecorationType({ 175 'borderWidth': '1px', 176 'borderRadius': '2px', 177 'borderStyle': 'solid', 178 // 'backgroundColor': 'rgba(255, 0, 255, 0.3)', 179 'backgroundColor': 'rgba(128, 128, 0, 0.3)', 180 // 'color':'purple' 181 'color':'orange' 182 }); 183 184 //回数に色付け 185 const numberOfTimesMarkerDecoration = vscode.window.createTextEditorDecorationType({ 186 'borderWidth': '1px', 187 'borderRadius': '2px', 188 'borderStyle': 'solid', 189 'backgroundColor': 'rgba(128, 128, 0, 0.3)', 190 'color':'orange' 191 }); 192 193 //係り受けの対象を色付け 194 const dependencyRelation = vscode.window.createTextEditorDecorationType({ 195 'borderWidth': '1px', 196 'borderRadius': '2px', 197 'borderStyle': 'solid', 198 'backgroundColor': 'rgba(0, 255, 0, 0.3)', 199 'color':'lightgreen' 200 }); 201}

JSON

1{ 2 "回数": [], 3 "強数量修飾": [], 4 "時数ノ": [], 5 "未来句": [], 6 "数量": [], 7 "強時間": [ 8 "ドア入力右=>常時", 9 "なし=>常時", 10 "ドア入力I=>常時", 11 "なし=>長時間", 12 "扉閉め忘れ=>一定時間以上" 13 ], 14 "時間": [] 15}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

ハイライトのON・OFFをコマンドを使用して、ON・OFFを切り替えるようにしました。
方法としては、decoratedWordの後に以下のコードを追加しました。
コードの内容はdecoratedWordとあまり変わりませんが、
disposeを使用することでハイライトの情報をクリアにするということをやっています。

Typescript

1 //ハイライトの削除 2 function clearHighlight(){ 3 // const activeEditor = vscode.window.activeTextEditor; 4 5 //時間 6 fromObjecttoRange(timeWordList,timeWords,dependencyRelationWords,timeCount); 7 //強時間 8 fromObjecttoRange(strengthTimeWordList,strengthTimeWords,dependencyRelationWords,strengthtimeCount); 9 //未来句 10 fromObjecttoRange(futurePhraseWordList,futurePhraseWords,dependencyRelationWords,futurephraseCount); 11 //数量 12 fromObjecttoRange(quantityWordList,quantityWords,dependencyRelationWords,quantityCount); 13 //時数ノ 14 fromObjecttoRange(numberOfHoursWordList,numberOfHoursWords,dependencyRelationWords,numberofhoursCount); 15 //強数量修飾 16 fromObjecttoRange(strengthQuantityQualifiedWordList,strengthQuantityQualifiedWords,dependencyRelationWords,strengthquantityqualifiedCount); 17 //回数 18 fromObjecttoRange(numberOfTimeWordList,numberOfTimeWords,dependencyRelationWords,numberoftimeCount); 19 20 timeMarkerDecoration.dispose(); 21 strengthTimeMarkerDecoration.dispose(); 22 futurePhraseMarkerDecoration.dispose(); 23 quantityMarkerDecoration.dispose(); 24 numberOfHoursMarkerDecoration.dispose(); 25 strengthQuantityQualifiedMarkerDecoration.dispose(); 26 strengthTimeMarkerDecoration.dispose(); 27 numberOfTimesMarkerDecoration.dispose(); 28 dependencyRelation.dispose(); 29 30 } 31 context.subscriptions.push(vscode.commands.registerCommand('extension.color', () => { 32 vscode.window.showInformationMessage("Color Range Word"); 33 decorateWord(); 34 })); 35 36 context.subscriptions.push(vscode.commands.registerCommand('extension.highlightOFF', () => { 37 vscode.window.showInformationMessage("HighLight OFF"); 38 clearHighlight(); 39 })); 40

投稿2019/05/10 08:25

syen2501

総合スコア38

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

やったことはないのですが、hiligthjsに乗っかるのが良さそうに思えます。

customもできるようですし。

https://highlightjs.readthedocs.io/en/latest/language-guide.html

投稿2019/05/09 22:30

odyu

総合スコア548

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問