Use a generic markup class to display externally rendered files and diffs (#15735)

* creates and implements generic markup less class

* How to give custom CSS to externally rendered html

* Clarifies sources of CSS styling of markup

* further clarification of sources of markup styling

* rename _markdown to _markup

* remove defunct import

* fix orphaned reference

* Update docs/content/doc/advanced/external-renderers.en-us.md

* more renames markdown -> markup

* do not suggest less customization

* add back tokens

* fix class whitespace, remove useless if-clause

* remove unused csv-data rules

* use named exports and rename functions

* sort imports

Co-authored-by: HarvsG <11440490+HarvsG@users.noreply.github.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>

12 files changed, 48 insertions, 48 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 2fce21b8d3..53843a6d22 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -4,26 +4,26 @@ import Vue from 'vue';
 import {htmlEscape} from 'escape-goat';
 import 'jquery.are-you-sure';
 
-import initMigration from './features/migration.js';
+import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
+import attachTribute from './features/tribute.js';
+import createColorPicker from './features/colorpicker.js';
+import createDropzone from './features/dropzone.js';
+import initClipboard from './features/clipboard.js';
 import initContextPopups from './features/contextpopup.js';
 import initGitGraph from './features/gitgraph.js';
-import initClipboard from './features/clipboard.js';
 import initHeatmap from './features/heatmap.js';
+import initImageDiff from './features/imagediff.js';
+import initMigration from './features/migration.js';
 import initProject from './features/projects.js';
 import initServiceWorker from './features/serviceworker.js';
-import initMarkdownAnchors from './markdown/anchors.js';
-import renderMarkdownContent from './markdown/content.js';
-import attachTribute from './features/tribute.js';
-import createColorPicker from './features/colorpicker.js';
-import createDropzone from './features/dropzone.js';
 import initTableSort from './features/tablesort.js';
-import initImageDiff from './features/imagediff.js';
-import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
+import {createCodeEditor, createMonaco} from './features/codeeditor.js';
+import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {initStopwatch} from './features/stopwatch.js';
-import {createCodeEditor, createMonaco} from './features/codeeditor.js';
-import {svg, svgs} from './svg.js';
+import {renderMarkupContent} from './markup/content.js';
 import {stripTags, mqBinarySearch} from './utils.js';
+import {svg, svgs} from './svg.js';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
@@ -51,7 +51,7 @@ function initCommentPreviewTab($form) {
     }, (data) => {
       const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
       $previewPanel.html(data);
-      renderMarkdownContent();
+      renderMarkupContent();
     });
   });
 
@@ -81,7 +81,7 @@ function initEditPreviewTab($form) {
       }, (data) => {
         const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
         $previewPanel.html(data);
-        renderMarkdownContent();
+        renderMarkupContent();
       });
     });
   }
@@ -1107,7 +1107,7 @@ async function initRepository() {
               dz.emit('submit');
               dz.emit('reload');
             }
-            renderMarkdownContent();
+            renderMarkupContent();
           });
         });
       } else {
@@ -1473,8 +1473,8 @@ function initWikiForm() {
             text: plainText,
             wiki: true
           }, (data) => {
-            preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
-            renderMarkdownContent();
+            preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
+            renderMarkupContent();
           });
         };
 
@@ -1553,7 +1553,7 @@ function initWikiForm() {
             const $form = $('.repository.wiki.new .ui.form');
             const $root = $form.find('.field.content');
             const loading = $root.data('loading');
-            $root.append(`<div class="ui bottom tab markdown" data-tab="preview">${loading}</div>`);
+            $root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
             initCommentPreviewTab($form);
           },
           className: 'fa fa-file',
@@ -2772,7 +2772,7 @@ $(document).ready(async () => {
   searchTeams();
   searchRepositories();
 
-  initMarkdownAnchors();
+  initMarkupAnchors();
   initCommentForm();
   initInstall();
   initArchiveLinks();
@@ -2830,7 +2830,7 @@ $(document).ready(async () => {
     initServiceWorker(),
     initNotificationCount(),
     initStopwatch(),
-    renderMarkdownContent(),
+    renderMarkupContent(),
     initGithook(),
     initImageDiff(),
   ]);
diff --git a/web_src/js/markdown/anchors.js b/web_src/js/markup/anchors.js
index 62bf8c83c3..cc2ed5db78 100644
--- a/web_src/js/markdown/anchors.js
+++ b/web_src/js/markup/anchors.js
@@ -1,6 +1,6 @@
 import {svg} from '../svg.js';
 
-const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6';
+const headingSelector = '.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6';
 
 function scrollToAnchor() {
   if (document.querySelector(':target')) return;
@@ -15,8 +15,8 @@ function scrollToAnchor() {
   }
 }
 
-export default function initMarkdownAnchors() {
-  if (!document.querySelector('.markdown')) return;
+export function initMarkupAnchors() {
+  if (!document.querySelector('.markup')) return;
 
   for (const heading of document.querySelectorAll(headingSelector)) {
     const originalId = heading.id.replace(/^user-content-/, '');
diff --git a/web_src/js/markdown/content.js b/web_src/js/markup/content.js
index 918cd6fe81..f06c9908f2 100644
--- a/web_src/js/markdown/content.js
+++ b/web_src/js/markup/content.js
@@ -1,5 +1,5 @@
 import {renderMermaid} from './mermaid.js';
 
-export default async function renderMarkdownContent() {
+export async function renderMarkupContent() {
   await renderMermaid(document.querySelectorAll('code.language-mermaid'));
 }
diff --git a/web_src/js/markdown/mermaid.js b/web_src/js/markup/mermaid.js
index a518bc7345..d0aefd1aff 100644
--- a/web_src/js/markdown/mermaid.js
+++ b/web_src/js/markup/mermaid.js
@@ -3,7 +3,7 @@ const MAX_SOURCE_CHARACTERS = 5000;
 function displayError(el, err) {
   el.closest('pre').classList.remove('is-loading');
   const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markdown-block-error mono');
+  errorNode.setAttribute('class', 'ui message error markup-block-error mono');
   errorNode.textContent = err.str || err.message || String(err);
   el.closest('pre').before(errorNode);
 }
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 7e563d2f23..d85f13cb33 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -102,8 +102,8 @@
   --color-active: #00000014;
   --color-menu: #ffffff;
   --color-card: #ffffff;
-  --color-markdown-table-row: #00000008;
-  --color-markdown-code-block: #00000010;
+  --color-markup-table-row: #00000008;
+  --color-markup-code-block: #00000010;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
   --color-shadow: #00000030;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5ff51b1d6d..549bd4d7e5 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -580,7 +580,7 @@
           border-right-color: var(--color-box-body);
         }
 
-        .markdown {
+        .markup {
           font-size: 14px;
         }
       }
@@ -1020,7 +1020,7 @@
             }
           }
 
-          .markdown {
+          .markup {
             font-size: 14px;
           }
 
@@ -1040,7 +1040,7 @@
               overflow: hidden;
             }
 
-            .tab.markdown {
+            .tab.markup {
               min-height: 5rem;
             }
           }
@@ -1244,7 +1244,7 @@
       margin-bottom: 1.5rem;
     }
 
-    .markdown {
+    .markup {
       font-size: 14px;
     }
   }
@@ -1996,7 +1996,7 @@
         margin-top: -5px;
       }
 
-      > .markdown {
+      > .markup {
         padding: 15px 30px;
 
         h1,
@@ -2991,7 +2991,7 @@ td.blob-excerpt {
 .webhook-info {
   padding: 7px 12px;
   margin: 10px 0;
-  background-color: var(--color-markdown-code-block);
+  background-color: var(--color-markup-code-block);
   border: 1px solid var(--color-secondary);
   border-radius: 3px;
   font-size: 13px;
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index f6f5df20a2..2b8700a745 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -81,7 +81,7 @@
   .ui.active.tab {
     padding: .5em;
 
-    &.markdown {
+    &.markup {
       padding: 1em;
       min-height: 168px;
     }
@@ -95,7 +95,7 @@
     border-top: 1px solid var(--color-secondary);
     padding: 10px 0;
 
-    .markdown-info {
+    .markup-info {
       display: inline-block;
       margin: 5px 0;
       font-size: 12px;
diff --git a/web_src/less/features/animations.less b/web_src/less/features/animations.less
index 0b50440bf3..f3491155cd 100644
--- a/web_src/less/features/animations.less
+++ b/web_src/less/features/animations.less
@@ -28,7 +28,7 @@
   border-radius: 100%;
 }
 
-.markdown pre.is-loading,
+.markup pre.is-loading,
 .editor-loading.is-loading {
   height: 12rem;
 }
diff --git a/web_src/less/index.less b/web_src/less/index.less
index c125ccac31..f52953f2a4 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -9,7 +9,8 @@
 @import "./features/imagediff.less";
 @import "./features/codeeditor.less";
 @import "./features/projects.less";
-@import "./markdown/mermaid.less";
+@import "./markup/content.less";
+@import "./markup/mermaid.less";
 
 @import "./chroma/base.less";
 @import "./chroma/light.less";
@@ -18,7 +19,6 @@
 @import "_tribute";
 @import "_font_i18n";
 @import "_base";
-@import "_markdown";
 @import "_home";
 @import "_install";
 @import "_form";
diff --git a/web_src/less/_markdown.less b/web_src/less/markup/content.less
index 66276894c0..df87c21d8c 100644
--- a/web_src/less/_markdown.less
+++ b/web_src/less/markup/content.less
@@ -1,4 +1,4 @@
-.markdown:not(code) {
+.markup {
   overflow: hidden;
   font-size: 16px;
   line-height: 1.5 !important;
@@ -290,7 +290,7 @@
   }
 
   table tr:nth-child(2n) {
-    background-color: var(--color-markdown-table-row);
+    background-color: var(--color-markup-table-row);
   }
 
   img {
@@ -404,7 +404,7 @@
     padding: .2em .4em;
     margin: 0;
     font-size: 85%;
-    background-color: var(--color-markdown-code-block);
+    background-color: var(--color-markup-code-block);
     border-radius: 4px;
   }
 
@@ -437,7 +437,7 @@
     padding: 16px;
     font-size: 85%;
     line-height: 1.45;
-    background-color: var(--color-markdown-code-block);
+    background-color: var(--color-markup-code-block);
     border-radius: 4px;
   }
 
@@ -477,7 +477,7 @@
     line-height: 10px;
     color: var(--color-text-light);
     vertical-align: middle;
-    background-color: var(--color-markdown-code-block);
+    background-color: var(--color-markup-code-block);
     border: 1px solid var(--color-secondary);
     border-radius: 3px;
     box-shadow: inset 0 -1px 0 var(--color-secondary);
@@ -523,7 +523,7 @@
   }
 }
 
-.markdown-block-error {
+.markup-block-error {
   margin-bottom: 0 !important;
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
@@ -534,7 +534,7 @@
   text-align: left !important;
 }
 
-.markdown-block-error + pre {
+.markup-block-error + pre {
   border-top: none !important;
   margin-top: 0 !important;
   border-top-left-radius: 0 !important;
diff --git a/web_src/less/markdown/mermaid.less b/web_src/less/markup/mermaid.less
index f68b577dec..f68b577dec 100644
--- a/web_src/less/markdown/mermaid.less
+++ b/web_src/less/markup/mermaid.less
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 346a6e85ea..9e39c4bec4 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -97,8 +97,8 @@
   --color-active: #ffffff16;
   --color-menu: #2e323e;
   --color-card: #2e323e;
-  --color-markdown-table-row: #ffffff06;
-  --color-markdown-code-block: #2a2e3a;
+  --color-markup-table-row: #ffffff06;
+  --color-markup-code-block: #2a2e3a;
   --color-button: #353846;
   --color-code-bg: #2a2e3a;
   --color-shadow: #00000060;
@@ -301,7 +301,7 @@ a.ui.basic.green.label:hover {
   & + .editor-preview-side {
     background: #353945;
 
-    .markdown:not(code).ui.segment {
+    .markup.ui.segment {
       border-width: 0;
     }
   }
@@ -754,7 +754,7 @@ img[src$="/img/matrix.svg"] {
   border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
 }
 
-.markdown-block-error {
+.markup-block-error {
   border: 1px solid rgba(121, 71, 66, .5) !important;
   border-bottom: none !important;
 }