From 640066840e23367d9d13e92d786b877448ae9329 Mon Sep 17 00:00:00 2001
From: 6543 <6543@obermui.de>
Date: Fri, 7 May 2021 10:43:41 +0200
Subject: [PATCH] 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>
---
.../doc/advanced/external-renderers.en-us.md | 33 +++++++++++++++
templates/org/home.tmpl | 2 +-
templates/repo/diff/box.tmpl | 2 +-
templates/repo/diff/comment_form.tmpl | 4 +-
templates/repo/diff/comments.tmpl | 2 +-
templates/repo/editor/edit.tmpl | 2 +-
templates/repo/empty.tmpl | 4 +-
templates/repo/issue/comment_tab.tmpl | 2 +-
templates/repo/issue/milestone_issues.tmpl | 2 +-
templates/repo/issue/milestones.tmpl | 2 +-
templates/repo/issue/view_content.tmpl | 4 +-
.../repo/issue/view_content/comments.tmpl | 8 ++--
templates/repo/release/list.tmpl | 2 +-
templates/repo/release/new.tmpl | 2 +-
templates/repo/settings/lfs_file.tmpl | 2 +-
templates/repo/view_file.tmpl | 2 +-
templates/repo/wiki/view.tmpl | 2 +-
templates/user/profile.tmpl | 2 +-
web_src/js/index.js | 42 +++++++++----------
web_src/js/{markdown => markup}/anchors.js | 6 +--
web_src/js/{markdown => markup}/content.js | 2 +-
web_src/js/{markdown => markup}/mermaid.js | 2 +-
web_src/less/_base.less | 4 +-
web_src/less/_repository.less | 12 +++---
web_src/less/_review.less | 4 +-
web_src/less/features/animations.less | 2 +-
web_src/less/index.less | 4 +-
.../{_markdown.less => markup/content.less} | 14 +++----
.../less/{markdown => markup}/mermaid.less | 0
web_src/less/themes/theme-arc-green.less | 8 ++--
30 files changed, 106 insertions(+), 73 deletions(-)
rename web_src/js/{markdown => markup}/anchors.js (82%)
rename web_src/js/{markdown => markup}/content.js (68%)
rename web_src/js/{markdown => markup}/mermaid.js (94%)
rename web_src/less/{_markdown.less => markup/content.less} (96%)
rename web_src/less/{markdown => markup}/mermaid.less (100%)
diff --git a/docs/content/doc/advanced/external-renderers.en-us.md b/docs/content/doc/advanced/external-renderers.en-us.md
index 6b283ca2e1..71fabc529d 100644
--- a/docs/content/doc/advanced/external-renderers.en-us.md
+++ b/docs/content/doc/advanced/external-renderers.en-us.md
@@ -98,3 +98,36 @@ Once your configuration changes have been made, restart Gitea to have changes ta
**Note**: Prior to Gitea 1.12 there was a single `markup.sanitiser` section with keys that were redefined for multiple rules, however,
there were significant problems with this method of configuration necessitating configuration through multiple sections.
+
+## Customizing CSS
+The external renderer is specified in the .ini in the format `[markup.XXXXX]` and the HTML supplied by your external renderer will be wrapped in a `<div>` with classes `markup` and `XXXXX`. The `markup` class provides out of the box styling (as does `markdown` if `XXXXX` is `markdown`). Otherwise you can use these classes to specifically target the contents of your rendered HTML.
+
+And so you could write some CSS:
+```css
+.markup.XXXXX html {
+ font-size: 100%;
+ overflow-y: scroll;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+.markup.XXXXX body {
+ color: #444;
+ font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
+ font-size: 12px;
+ line-height: 1.7;
+ padding: 1em;
+ margin: auto;
+ max-width: 42em;
+ background: #fefefe;
+}
+
+.markup.XXXXX p {
+ color: orangered;
+}
+```
+
+Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.css` and import it using a custom header file `custom/templates/custom/header.tmpl`:
+```html
+<link type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
+```
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 9b77ae6b3f..5e0a53aa56 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -11,7 +11,7 @@
</span>
{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
</div>
- {{if $.RenderedDescription}}<p class="render-content markdown">{{$.RenderedDescription|Str2html}}</p>{{end}}
+ {{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}}
<div class="text grey meta">
{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 9a2f7bdd7f..582b66d5db 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -164,7 +164,7 @@
<div class="ui bottom attached active write tab segment">
<textarea class="review-textarea" tabindex="1" name="content"></textarea>
</div>
- <div class="ui bottom attached tab preview segment markdown">
+ <div class="ui bottom attached tab preview segment markup">
{{$.i18n.Tr "loading"}}
</div>
<div class="text right edit buttons">
diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index c82d32c214..628cd52dc2 100644
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@@ -22,12 +22,12 @@
<div class="ui active tab" data-tab="write">
<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
</div>
- <div class="ui tab markdown" data-tab="preview">
+ <div class="ui tab markup" data-tab="preview">
{{.i18n.Tr "loading"}}
</div>
</div>
<div class="field footer">
- <span class="markdown-info">{{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
+ <span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
<div class="ui right">
{{if $.reply}}
<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index b566ffce9a..6e39fbe854 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -51,7 +51,7 @@
</div>
</div>
<div class="ui attached segment comment-body">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index 3efde70f50..b7e1589aa1 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -44,7 +44,7 @@
{{.FileContent}}</textarea>
<div class="editor-loading is-loading"></div>
</div>
- <div class="ui bottom attached tab segment markdown" data-tab="preview">
+ <div class="ui bottom attached tab segment markup" data-tab="preview">
{{.i18n.Tr "loading"}}
</div>
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
index 7dae7c0121..21c6005456 100644
--- a/templates/repo/empty.tmpl
+++ b/templates/repo/empty.tmpl
@@ -27,7 +27,7 @@
<div class="item">
<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
- <div class="markdown">
+ <div class="markup">
<pre><code>touch README.md
git init
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
@@ -41,7 +41,7 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
<div class="item">
<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
- <div class="markdown">
+ <div class="markup">
<pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span>
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
</div>
diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl
index ab874bdd13..77e82930dc 100644
--- a/templates/repo/issue/comment_tab.tmpl
+++ b/templates/repo/issue/comment_tab.tmpl
@@ -8,7 +8,7 @@
{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
</textarea>
</div>
- <div class="ui bottom tab markdown" data-tab="preview">
+ <div class="ui bottom tab markup" data-tab="preview">
{{.i18n.Tr "loading"}}
</div>
</div>
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 8c2f36f04b..897d297d37 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -5,7 +5,7 @@
<div class="ui three column stackable grid">
<div class="column">
<h1>{{.Milestone.Name}}</h1>
- <div class="markdown content">
+ <div class="markup content">
{{.Milestone.RenderedContent|Str2html}}
</div>
</div>
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index c7d3522abc..448d758e3e 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -98,7 +98,7 @@
</div>
{{end}}
{{if .Content}}
- <div class="markdown content">
+ <div class="markup content">
{{.RenderedContent|Str2html}}
</div>
{{end}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 0482604b70..e353d71ee9 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -57,7 +57,7 @@
</div>
</div>
<div class="ui attached segment comment-body">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .Issue.RenderedContent}}
{{.Issue.RenderedContent|Str2html}}
{{else}}
@@ -191,7 +191,7 @@
<div class="ui bottom active tab write">
<textarea tabindex="1" name="content"></textarea>
</div>
- <div class="ui bottom tab preview markdown">
+ <div class="ui bottom tab preview markup">
{{$.i18n.Tr "loading"}}
</div>
</div>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 81f0d0434a..4863f7f2f1 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -64,7 +64,7 @@
</div>
</div>
<div class="ui attached segment comment-body">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
@@ -442,7 +442,7 @@
</span>
</div>
<div class="ui attached segment comment-body">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
@@ -552,7 +552,7 @@
</div>
</div>
<div class="text comment-content">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
@@ -739,7 +739,7 @@
</span>
</div>
<div class="ui attached segment">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 63f9e26cf1..d98e441644 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -136,7 +136,7 @@
| <span class="ahead"><a href="{{$.RepoLink}}/compare/{{.TagName | EscapePound}}...{{.Target}}">{{$.i18n.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}}</a> {{$.i18n.Tr "repo.release.ahead.target" .Target}}</span>
{{end}}
</p>
- <div class="markdown desc">
+ <div class="markup desc">
{{Str2html .Note}}
</div>
<div class="ui accordion download">
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index 8489d89597..c4b36597c6 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -53,7 +53,7 @@
<div class="ui bottom active tab" data-tab="write">
<textarea name="content">{{.content}}</textarea>
</div>
- <div class="ui bottom tab markdown" data-tab="preview">
+ <div class="ui bottom tab markup" data-tab="preview">
{{$.i18n.Tr "loading"}}
</div>
</div>
diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl
index 09eeb3f27f..478c034e11 100644
--- a/templates/repo/settings/lfs_file.tmpl
+++ b/templates/repo/settings/lfs_file.tmpl
@@ -12,7 +12,7 @@
</div>
</h4>
<div class="ui attached table unstackable segment">
- <div class="file-view {{if .IsMarkup}}markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}">
+ <div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextFile}} code-view{{end}}">
{{if .IsMarkup}}
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
{{else if .IsRenderedHTML}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index d9c1e93eaf..5798ec875c 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -64,7 +64,7 @@
{{end}}
</h4>
<div class="ui attached table unstackable segment">
- <div class="file-view {{if .IsMarkup}}{{.MarkupType}} {{if ne "csv" .MarkupType}}markdown{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
+ <div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextSource}} code-view{{end}}">
{{if .IsMarkup}}
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
{{else if .IsRenderedHTML}}
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 0bc5858863..fbb97db4ad 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -61,7 +61,7 @@
</div>
{{end}}
<div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;">
- <div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markdown">
+ <div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markup">
{{.content | Str2html}}
</div>
{{if .sidebarPresent}}
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 18f3c9f6dd..29da933493 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -36,7 +36,7 @@
{{end}}
{{if $.RenderedDescription}}
<li>
- <div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div>
+ <div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
</li>
{{end}}
{{range .OpenIDs}}
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 initContextPopups from './features/contextpopup.js';
-import initGitGraph from './features/gitgraph.js';
-import initClipboard from './features/clipboard.js';
-import initHeatmap from './features/heatmap.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 ActivityTopAuthors from './components/ActivityTopAuthors.vue';
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 initClipboard from './features/clipboard.js';
+import initContextPopups from './features/contextpopup.js';
+import initGitGraph from './features/gitgraph.js';
+import initHeatmap from './features/heatmap.js';
import initImageDiff from './features/imagediff.js';
-import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
+import initMigration from './features/migration.js';
+import initProject from './features/projects.js';
+import initServiceWorker from './features/serviceworker.js';
+import initTableSort from './features/tablesort.js';
+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
similarity index 82%
rename from web_src/js/markdown/anchors.js
rename to 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
similarity index 68%
rename from web_src/js/markdown/content.js
rename to 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
similarity index 94%
rename from web_src/js/markdown/mermaid.js
rename to 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
similarity index 96%
rename from web_src/less/_markdown.less
rename to 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
similarity index 100%
rename from web_src/less/markdown/mermaid.less
rename to 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;
}