From e67ecd97680f7765c747fcc6a4f1ee9863349d57 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Wed, 31 Aug 2022 01:02:10 +0800
Subject: [PATCH] ui: support data-line

---
 .../components/highlighter/highlighter.page.styl   | 12 ++++++++++++
 .../components/highlighter/highlighter.page.ts     | 14 +++++++++++---
 .../ui-default/components/highlighter/prismjs.js   |  1 +
 packages/ui-default/package.json                   |  2 +-
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/ui-default/components/highlighter/highlighter.page.styl b/packages/ui-default/components/highlighter/highlighter.page.styl
index 8454f7969..6168b7f46 100644
--- a/packages/ui-default/components/highlighter/highlighter.page.styl
+++ b/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
diff --git a/packages/ui-default/components/highlighter/highlighter.page.ts b/packages/ui-default/components/highlighter/highlighter.page.ts
index 4778fc38b..5bde403ab 100644
--- a/packages/ui-default/components/highlighter/highlighter.page.ts
+++ b/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) {
diff --git a/packages/ui-default/components/highlighter/prismjs.js b/packages/ui-default/components/highlighter/prismjs.js
index 21ae80912..d73f8893e 100644
--- a/packages/ui-default/components/highlighter/prismjs.js
+++ b/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';
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 035683c58..c1d715c05 100644
--- a/packages/ui-default/package.json
+++ b/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",