ui: support data-line

packages/ui-default/components/highlighter/highlighter.page.styl

@@ -25,6 +25,18 @@ code
 [data-syntax-hl-show-line-number] pre.line-numbers > code
   white-space: pre
 
+.line-highlight 
+  position: absolute
+  left: 0
+  right: 0
+  padding: inherit 0
+  margin-top: 1em /* Same as .prism’s padding-top */
+  background: hsla(24, 20%, 50%,.08)
+  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0))
+  pointer-events: none
+  line-height: inherit
+  white-space: pre
+
 .sample > .toolbar
   right: 0.9375em !important
   top: 3.7875em !important

packages/ui-default/components/highlighter/highlighter.page.ts

@@ -6,14 +6,22 @@ import tpl from 'vj/utils/tpl';
 const highlighterPage = new AutoloadPage('highlighterPage', () => {
   import('./prismjs').then(({ default: prismjs }) => {
     function runHighlight($container) {
+      $container.find('pre code').get().forEach((code) => {
+        const language = ($(code).attr('class') || '').trim();
+        const m = language.match(/language-([a-z0-9]+)(\|[\d,-]+)/);
+        if (m?.[2]) {
+          $(code).parent().attr('data-line', m[2].substring(1));
+          $(code).attr('class', `language-${m[1]}`);
+        }
+      });
       prismjs.highlightBlocks($container);
       $container.find('pre code').get().forEach((code) => {
         const $code = $(code);
         const $root = $code.parent().parent();
         const language = ($(code).attr('class') || '').trim();
-        const m = language.match(/language-([a-z0-9]+)/);
-        if (m && m[1] && m[1].toLowerCase().startsWith('input')) {
-          const id = +m[1].substr(5, m[1].length - 5);
+        const m = language.match(/language-input([0-9]+)/);
+        if (m?.[1]) {
+          const id = +m[1];
           if (Number.isSafeInteger(id)) {
             const $output = $container.find(`pre.language-output${id}`);
             if ($output.length) {

packages/ui-default/components/highlighter/prismjs.js

@@ -4,6 +4,7 @@ import 'prismjs/plugins/toolbar/prism-toolbar';
 import 'prismjs/plugins/toolbar/prism-toolbar.css';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/plugins/line-highlight/prism-line-highlight';
 
 import Clipboard from 'clipboard';
 import $ from 'jquery';

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.39.18",
+  "version": "4.39.19",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",