emphasize active rules in linter config dialog

edit/edit.css

@@ -823,6 +823,11 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 #message-box.center.lint-config #message-box-contents {
   text-align: left;
 }
+#help-popup .active-linter-rule {
+  font-weight: bold;
+  text-decoration: underline;
+  background-color: rgba(128, 128, 128, .2);
+}
 
 /************ CSS beautifier ************/
 .beautify-options {

edit/linter-dialogs.js

@@ -57,6 +57,21 @@
       ]));
     cm = popup.codebox;
     cm.focus();
+    const rulesStr = getActiveRules().join('|');
+    if (rulesStr) {
+      const rx = new RegExp(`"(${rulesStr})"\\s*:`);
+      let line = 0;
+      cm.startOperation();
+      cm.eachLine(({text}) => {
+        const m = rx.exec(text);
+        if (m) {
+          const ch = m.index + 1;
+          cm.markText({line, ch}, {line, ch: ch + m[1].length}, {className: 'active-linter-rule'});
+        }
+        ++line;
+      });
+      cm.endOperation();
+    }
     cm.on('changes', updateConfigButtons);
     updateConfigButtons();
     window.on('closeHelp', onConfigClose, {once: true});
@@ -86,15 +101,20 @@
           rule === 'CssSyntaxError' ? rule : $createLink(baseUrl + rule, rule));
     }
     const header = t('linterIssuesHelp', '\x01').split('\x01');
-    const activeRules = new Set([...linterMan.getIssues()].map(issue => issue.rule));
     helpPopup.show(t('linterIssues'),
       $create([
         header[0], headerLink, header[1],
-        $create('ul.rules', [...activeRules].map(template)),
+        $create('ul.rules', getActiveRules().map(template)),
         $create('button', {onclick: linterMan.showLintConfig}, t('configureStyle')),
       ]));
   };
 
+  function getActiveRules() {
+    const all = [...linterMan.getIssues()].map(issue => issue.rule);
+    const uniq = new Set(all);
+    return [...uniq];
+  }
+
   function getLexicalDepth(lexicalState) {
     let depth = 0;
     while ((lexicalState = lexicalState.prev)) {