ui: support sep view for samples

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

@@ -1,6 +1,8 @@
 import { AutoloadPage } from 'vj/misc/Page';
 import load from 'vj/components/wastyle/index';
 import Notification from 'vj/components/notification/index';
+import tpl from 'vj/utils/tpl';
+import i18n from 'vj/utils/i18n';
 
 const highlighterPage = new AutoloadPage('highlighterPage', async () => {
   const [{ default: prismjs }, [success, format]] = await Promise.all([
@@ -10,7 +12,28 @@ const highlighterPage = new AutoloadPage('highlighterPage', async () => {
   if (!success) Notification.error(`Astyle load fail: ${format}`);
   function runHighlight($container) {
     prismjs.highlightBlocks($container, success ? format : null);
+    $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);
+        if (Number.isSafeInteger(id)) {
+          const $output = $container.find(`pre.language-output${id}`);
+          if ($output.length) {
+            const $c = $(document.createElement('div')).addClass('row');
+            $root.clone(true).prepend($(tpl`<h2>${i18n('Sample Input')} ${id}</h2>`))
+              .addClass('medium-6 columns sample').appendTo($c);
+            $output.parent().prepend($(tpl`<h2>${i18n('Sample Output')} ${id}</h2>`))
+              .addClass('medium-6 columns sample').appendTo($c);
+            $root.replaceWith($c);
+          }
+        }
+      }
+    });
   }
+
   runHighlight($('body'));
   $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
 });

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

@@ -25,6 +25,10 @@ code
 [data-syntax-hl-show-line-number] pre.line-numbers > code
   white-space: pre
 
+.sample > .toolbar
+  right: 12px !important
+  top: 59px !important
+
 .toolbar
   position: absolute
   white-space: no-wrap