**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" />
+```
</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}}
<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">
<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>
</div>
</div>
<div class="ui attached segment comment-body">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
{{.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">
<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}}
<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>
{{- 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>
<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>
</div>
{{end}}
{{if .Content}}
- <div class="markdown content">
+ <div class="markup content">
{{.RenderedContent|Str2html}}
</div>
{{end}}
</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}}
<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>
</div>
</div>
<div class="ui attached segment comment-body">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
</span>
</div>
<div class="ui attached segment comment-body">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
</div>
</div>
<div class="text comment-content">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
</span>
</div>
<div class="ui attached segment">
- <div class="render-content markdown">
+ <div class="render-content markup">
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
{{else}}
| <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">
<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>
</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}}
{{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}}
</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}}
{{end}}
{{if $.RenderedDescription}}
<li>
- <div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div>
+ <div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
</li>
{{end}}
{{range .OpenIDs}}
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;
}, (data) => {
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
$previewPanel.html(data);
- renderMarkdownContent();
+ renderMarkupContent();
});
});
}, (data) => {
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
$previewPanel.html(data);
- renderMarkdownContent();
+ renderMarkupContent();
});
});
}
dz.emit('submit');
dz.emit('reload');
}
- renderMarkdownContent();
+ renderMarkupContent();
});
});
} else {
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();
});
};
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',
searchTeams();
searchRepositories();
- initMarkdownAnchors();
+ initMarkupAnchors();
initCommentForm();
initInstall();
initArchiveLinks();
initServiceWorker(),
initNotificationCount(),
initStopwatch(),
- renderMarkdownContent(),
+ renderMarkupContent(),
initGithook(),
initImageDiff(),
]);
+++ /dev/null
-import {svg} from '../svg.js';
-
-const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6';
-
-function scrollToAnchor() {
- if (document.querySelector(':target')) return;
- if (!window.location.hash || window.location.hash.length <= 1) return;
- const id = decodeURIComponent(window.location.hash.substring(1));
- const el = document.getElementById(`user-content-${id}`);
- if (el) {
- el.scrollIntoView();
- } else if (id.startsWith('user-content-')) { // compat for links with old 'user-content-' prefixed hashes
- const el = document.getElementById(id);
- if (el) el.scrollIntoView();
- }
-}
-
-export default function initMarkdownAnchors() {
- if (!document.querySelector('.markdown')) return;
-
- for (const heading of document.querySelectorAll(headingSelector)) {
- const originalId = heading.id.replace(/^user-content-/, '');
- const a = document.createElement('a');
- a.classList.add('anchor');
- a.setAttribute('href', `#${encodeURIComponent(originalId)}`);
- a.innerHTML = svg('octicon-link');
- heading.prepend(a);
- }
-
- scrollToAnchor();
- window.addEventListener('hashchange', scrollToAnchor);
-}
+++ /dev/null
-import {renderMermaid} from './mermaid.js';
-
-export default async function renderMarkdownContent() {
- await renderMermaid(document.querySelectorAll('code.language-mermaid'));
-}
+++ /dev/null
-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.textContent = err.str || err.message || String(err);
- el.closest('pre').before(errorNode);
-}
-
-export async function renderMermaid(els) {
- if (!els || !els.length) return;
-
- const mermaid = await import(/* webpackChunkName: "mermaid" */'mermaid');
-
- mermaid.initialize({
- mermaid: {
- startOnLoad: false,
- },
- flowchart: {
- useMaxWidth: true,
- htmlLabels: false,
- },
- theme: 'neutral',
- securityLevel: 'strict',
- });
-
- for (const el of els) {
- if (el.textContent.length > MAX_SOURCE_CHARACTERS) {
- displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${MAX_SOURCE_CHARACTERS}.`));
- continue;
- }
-
- let valid;
- try {
- valid = mermaid.parse(el.textContent);
- } catch (err) {
- displayError(el, err);
- }
-
- if (!valid) {
- el.closest('pre').classList.remove('is-loading');
- continue;
- }
-
- try {
- mermaid.init(undefined, el, (id) => {
- const svg = document.getElementById(id);
- svg.classList.add('mermaid-chart');
- svg.closest('pre').replaceWith(svg);
- });
- } catch (err) {
- displayError(el, err);
- }
- }
-}
--- /dev/null
+import {svg} from '../svg.js';
+
+const headingSelector = '.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6';
+
+function scrollToAnchor() {
+ if (document.querySelector(':target')) return;
+ if (!window.location.hash || window.location.hash.length <= 1) return;
+ const id = decodeURIComponent(window.location.hash.substring(1));
+ const el = document.getElementById(`user-content-${id}`);
+ if (el) {
+ el.scrollIntoView();
+ } else if (id.startsWith('user-content-')) { // compat for links with old 'user-content-' prefixed hashes
+ const el = document.getElementById(id);
+ if (el) el.scrollIntoView();
+ }
+}
+
+export function initMarkupAnchors() {
+ if (!document.querySelector('.markup')) return;
+
+ for (const heading of document.querySelectorAll(headingSelector)) {
+ const originalId = heading.id.replace(/^user-content-/, '');
+ const a = document.createElement('a');
+ a.classList.add('anchor');
+ a.setAttribute('href', `#${encodeURIComponent(originalId)}`);
+ a.innerHTML = svg('octicon-link');
+ heading.prepend(a);
+ }
+
+ scrollToAnchor();
+ window.addEventListener('hashchange', scrollToAnchor);
+}
--- /dev/null
+import {renderMermaid} from './mermaid.js';
+
+export async function renderMarkupContent() {
+ await renderMermaid(document.querySelectorAll('code.language-mermaid'));
+}
--- /dev/null
+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 markup-block-error mono');
+ errorNode.textContent = err.str || err.message || String(err);
+ el.closest('pre').before(errorNode);
+}
+
+export async function renderMermaid(els) {
+ if (!els || !els.length) return;
+
+ const mermaid = await import(/* webpackChunkName: "mermaid" */'mermaid');
+
+ mermaid.initialize({
+ mermaid: {
+ startOnLoad: false,
+ },
+ flowchart: {
+ useMaxWidth: true,
+ htmlLabels: false,
+ },
+ theme: 'neutral',
+ securityLevel: 'strict',
+ });
+
+ for (const el of els) {
+ if (el.textContent.length > MAX_SOURCE_CHARACTERS) {
+ displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${MAX_SOURCE_CHARACTERS}.`));
+ continue;
+ }
+
+ let valid;
+ try {
+ valid = mermaid.parse(el.textContent);
+ } catch (err) {
+ displayError(el, err);
+ }
+
+ if (!valid) {
+ el.closest('pre').classList.remove('is-loading');
+ continue;
+ }
+
+ try {
+ mermaid.init(undefined, el, (id) => {
+ const svg = document.getElementById(id);
+ svg.classList.add('mermaid-chart');
+ svg.closest('pre').replaceWith(svg);
+ });
+ } catch (err) {
+ displayError(el, err);
+ }
+ }
+}
--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;
+++ /dev/null
-.markdown:not(code) {
- overflow: hidden;
- font-size: 16px;
- line-height: 1.5 !important;
- word-wrap: break-word;
-
- &.ui.segment {
- padding: 3em;
- }
-
- &.file-view {
- padding: 2em !important;
- }
-
- > *:first-child {
- margin-top: 0 !important;
- }
-
- > *:last-child {
- margin-bottom: 0 !important;
- }
-
- a:not([href]) {
- color: inherit;
- text-decoration: none;
- }
-
- .absent {
- color: var(--color-red);
- }
-
- .anchor {
- padding-right: 4px;
- margin-left: -20px;
- line-height: 1;
- color: inherit;
- }
-
- .anchor .svg {
- vertical-align: middle;
- }
-
- .anchor:focus {
- outline: none;
- }
-
- h1 .anchor .svg,
- h2 .anchor .svg,
- h3 .anchor .svg,
- h4 .anchor .svg,
- h5 .anchor .svg,
- h6 .anchor .svg {
- visibility: hidden;
- }
-
- h1:hover .anchor .svg,
- h2:hover .anchor .svg,
- h3:hover .anchor .svg,
- h4:hover .anchor .svg,
- h5:hover .anchor .svg,
- h6:hover .anchor .svg {
- visibility: visible;
- }
-
- h2 .anchor .svg,
- h3 .anchor .svg,
- h4 .anchor .svg {
- position: relative;
- top: -2px;
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- margin-top: 24px;
- margin-bottom: 16px;
- font-weight: 600;
- line-height: 1.25;
- }
-
- h1 tt,
- h1 code,
- h2 tt,
- h2 code,
- h3 tt,
- h3 code,
- h4 tt,
- h4 code,
- h5 tt,
- h5 code,
- h6 tt,
- h6 code {
- font-size: inherit;
- }
-
- h1 {
- padding-bottom: .3em;
- font-size: 2em;
- border-bottom: 1px solid var(--color-secondary);
- }
-
- h2 {
- padding-bottom: .3em;
- font-size: 1.5em;
- border-bottom: 1px solid var(--color-secondary);
- }
-
- h3 {
- font-size: 1.25em;
- }
-
- h4 {
- font-size: 1em;
- }
-
- h5 {
- font-size: .875em;
- }
-
- h6 {
- font-size: .85em;
- color: var(--color-text-light-2);
- }
-
- p,
- blockquote,
- details,
- ul,
- ol,
- dl,
- table,
- pre {
- margin-top: 0;
- margin-bottom: 16px;
- }
-
- hr {
- height: 4px;
- padding: 0;
- margin: 16px 0;
- background-color: var(--color-secondary);
- border: 0;
- }
-
- ul,
- ol {
- padding-left: 2em;
- }
-
- ul.no-list,
- ol.no-list {
- padding: 0;
- list-style-type: none;
- }
-
- .task-list-item {
- list-style-type: none;
-
- input[type="checkbox"] {
- margin: 0 6px .25em -1.6em;
- }
- }
-
- .task-list-item + .task-list-item {
- margin-top: 3px;
- }
-
- input[type="checkbox"] {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- position: relative;
- border: 1px solid var(--color-secondary);
- border-radius: 2px;
- background: var(--color-input-background);
- height: 14px;
- width: 14px;
- opacity: 1 !important; // override fomantic on edit preview
- pointer-events: auto !important; // override fomantic on edit preview
- vertical-align: middle !important; // override fomantic on edit preview
- }
-
- input[type="checkbox"]:not([disabled]):hover,
- input[type="checkbox"]:not([disabled]):active {
- border-color: var(--color-primary);
- }
-
- input[type="checkbox"]::after {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- pointer-events: none;
- background: var(--color-text);
- mask-size: cover;
- -webkit-mask-size: cover;
- }
-
- input[type="checkbox"]:checked::after {
- content: "";
- mask-image: var(--checkbox-mask-checked);
- -webkit-mask-image: var(--checkbox-mask-checked);
- }
-
- input[type="checkbox"]:indeterminate::after {
- content: "";
- mask-image: var(--checkbox-mask-indeterminate);
- -webkit-mask-image: var(--checkbox-mask-indeterminate);
- }
-
- ul ul,
- ul ol,
- ol ol,
- ol ul {
- margin-top: 0;
- margin-bottom: 0;
- }
-
- ol ol,
- ul ol {
- list-style-type: lower-roman;
- }
-
- li > p {
- margin-top: 16px;
- }
-
- li + li {
- margin-top: .25em;
- }
-
- dl {
- padding: 0;
- }
-
- dl dt {
- padding: 0;
- margin-top: 16px;
- font-size: 1em;
- font-style: italic;
- font-weight: 600;
- }
-
- dl dd {
- padding: 0 16px;
- margin-bottom: 16px;
- }
-
- blockquote {
- margin-left: 0;
- padding: 0 15px;
- color: var(--color-text-light-2);
- border-left: 4px solid var(--color-secondary);
- }
-
- blockquote > :first-child {
- margin-top: 0;
- }
-
- blockquote > :last-child {
- margin-bottom: 0;
- }
-
- table {
- display: block;
- width: 100%;
- width: -webkit-max-content;
- width: -moz-max-content;
- width: max-content;
- max-width: 100%;
- overflow: auto;
- }
-
- table th {
- font-weight: 600;
- }
-
- table th,
- table td {
- padding: 6px 13px !important;
- border: 1px solid var(--color-secondary) !important;
- }
-
- table tr {
- border-top: 1px solid var(--color-secondary);
- }
-
- table tr:nth-child(2n) {
- background-color: var(--color-markdown-table-row);
- }
-
- img {
- max-width: 100%;
- box-sizing: initial;
- }
-
- img[align="right"] {
- padding-left: 20px;
- }
-
- img[align="left"] {
- padding-right: 20px;
- }
-
- .emoji {
- max-width: none;
- vertical-align: text-top;
- }
-
- span.frame {
- display: block;
- overflow: hidden;
- }
-
- span.frame > span {
- display: block;
- float: left;
- width: auto;
- padding: 7px;
- margin: 13px 0 0;
- overflow: hidden;
- border: 1px solid var(--color-secondary);
- }
-
- span.frame span img {
- display: block;
- float: left;
- }
-
- span.frame span span {
- display: block;
- padding: 5px 0 0;
- clear: both;
- color: var(--color-text);
- }
-
- span.align-center {
- display: block;
- overflow: hidden;
- clear: both;
- }
-
- span.align-center > span {
- display: block;
- margin: 13px auto 0;
- overflow: hidden;
- text-align: center;
- }
-
- span.align-center span img {
- margin: 0 auto;
- text-align: center;
- }
-
- span.align-right {
- display: block;
- overflow: hidden;
- clear: both;
- }
-
- span.align-right > span {
- display: block;
- margin: 13px 0 0;
- overflow: hidden;
- text-align: right;
- }
-
- span.align-right span img {
- margin: 0;
- text-align: right;
- }
-
- span.float-left {
- display: block;
- float: left;
- margin-right: 13px;
- overflow: hidden;
- }
-
- span.float-left span {
- margin: 13px 0 0;
- }
-
- span.float-right {
- display: block;
- float: right;
- margin-left: 13px;
- overflow: hidden;
- }
-
- span.float-right > span {
- display: block;
- margin: 13px auto 0;
- overflow: hidden;
- text-align: right;
- }
-
- code,
- tt {
- padding: .2em .4em;
- margin: 0;
- font-size: 85%;
- background-color: var(--color-markdown-code-block);
- border-radius: 4px;
- }
-
- code br,
- tt br {
- display: none;
- }
-
- del code {
- text-decoration: inherit;
- }
-
- pre > code {
- padding: 0;
- margin: 0;
- font-size: 100%;
- white-space: pre-wrap;
- word-break: break-all;
- overflow-wrap: break-word;
- background: transparent;
- border: 0;
- }
-
- .highlight {
- margin-bottom: 16px;
- }
-
- .highlight pre,
- pre {
- padding: 16px;
- font-size: 85%;
- line-height: 1.45;
- background-color: var(--color-markdown-code-block);
- border-radius: 4px;
- }
-
- .highlight pre {
- margin-bottom: 0;
- word-break: normal;
- }
-
- pre {
- word-wrap: normal;
- }
-
- pre code,
- pre tt {
- display: inline;
- max-width: initial;
- padding: 0;
- margin: 0;
- overflow: initial;
- line-height: inherit;
- word-wrap: normal;
- background-color: transparent;
- border: 0;
- }
-
- pre code::before,
- pre code::after,
- pre tt::before,
- pre tt::after {
- content: normal;
- }
-
- kbd {
- display: inline-block;
- padding: 3px 5px;
- font-size: 11px;
- line-height: 10px;
- color: var(--color-text-light);
- vertical-align: middle;
- background-color: var(--color-markdown-code-block);
- border: 1px solid var(--color-secondary);
- border-radius: 3px;
- box-shadow: inset 0 -1px 0 var(--color-secondary);
- }
-
- .ui.list .list,
- ol.ui.list ol,
- ul.ui.list ul {
- padding-left: 2em;
- }
-}
-
-.repository.wiki.revisions {
- .ui.container > .ui.stackable.grid {
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
-
- > .header {
- margin-top: 0;
-
- .sub.header {
- padding-left: 52px;
- word-break: break-word;
- }
- }
- }
-}
-
-.file-revisions-btn {
- display: block;
- float: left;
- margin-bottom: 2px !important;
- padding: 11px !important;
- margin-right: 10px !important;
-
- i {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-}
-
-.markdown-block-error {
- margin-bottom: 0 !important;
- border-bottom-left-radius: 0 !important;
- border-bottom-right-radius: 0 !important;
- box-shadow: none !important;
- font-size: 85% !important;
- white-space: pre !important;
- padding: .5rem 1rem !important;
- text-align: left !important;
-}
-
-.markdown-block-error + pre {
- border-top: none !important;
- margin-top: 0 !important;
- border-top-left-radius: 0 !important;
- border-top-right-radius: 0 !important;
-}
border-right-color: var(--color-box-body);
}
- .markdown {
+ .markup {
font-size: 14px;
}
}
}
}
- .markdown {
+ .markup {
font-size: 14px;
}
overflow: hidden;
}
- .tab.markdown {
+ .tab.markup {
min-height: 5rem;
}
}
margin-bottom: 1.5rem;
}
- .markdown {
+ .markup {
font-size: 14px;
}
}
margin-top: -5px;
}
- > .markdown {
+ > .markup {
padding: 15px 30px;
h1,
.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;
.ui.active.tab {
padding: .5em;
- &.markdown {
+ &.markup {
padding: 1em;
min-height: 168px;
}
border-top: 1px solid var(--color-secondary);
padding: 10px 0;
- .markdown-info {
+ .markup-info {
display: inline-block;
margin: 5px 0;
font-size: 12px;
border-radius: 100%;
}
-.markdown pre.is-loading,
+.markup pre.is-loading,
.editor-loading.is-loading {
height: 12rem;
}
@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";
@import "_tribute";
@import "_font_i18n";
@import "_base";
-@import "_markdown";
@import "_home";
@import "_install";
@import "_form";
+++ /dev/null
-.mermaid-chart {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1rem;
- margin: 1rem auto;
- height: auto;
-}
-
-/* mermaid's errorRenderer seems to unavoidably spew stuff into <body>, hide it */
-body > div[id*="mermaid-"] {
- display: none !important;
-}
--- /dev/null
+.markup {
+ overflow: hidden;
+ font-size: 16px;
+ line-height: 1.5 !important;
+ word-wrap: break-word;
+
+ &.ui.segment {
+ padding: 3em;
+ }
+
+ &.file-view {
+ padding: 2em !important;
+ }
+
+ > *:first-child {
+ margin-top: 0 !important;
+ }
+
+ > *:last-child {
+ margin-bottom: 0 !important;
+ }
+
+ a:not([href]) {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ .absent {
+ color: var(--color-red);
+ }
+
+ .anchor {
+ padding-right: 4px;
+ margin-left: -20px;
+ line-height: 1;
+ color: inherit;
+ }
+
+ .anchor .svg {
+ vertical-align: middle;
+ }
+
+ .anchor:focus {
+ outline: none;
+ }
+
+ h1 .anchor .svg,
+ h2 .anchor .svg,
+ h3 .anchor .svg,
+ h4 .anchor .svg,
+ h5 .anchor .svg,
+ h6 .anchor .svg {
+ visibility: hidden;
+ }
+
+ h1:hover .anchor .svg,
+ h2:hover .anchor .svg,
+ h3:hover .anchor .svg,
+ h4:hover .anchor .svg,
+ h5:hover .anchor .svg,
+ h6:hover .anchor .svg {
+ visibility: visible;
+ }
+
+ h2 .anchor .svg,
+ h3 .anchor .svg,
+ h4 .anchor .svg {
+ position: relative;
+ top: -2px;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-top: 24px;
+ margin-bottom: 16px;
+ font-weight: 600;
+ line-height: 1.25;
+ }
+
+ h1 tt,
+ h1 code,
+ h2 tt,
+ h2 code,
+ h3 tt,
+ h3 code,
+ h4 tt,
+ h4 code,
+ h5 tt,
+ h5 code,
+ h6 tt,
+ h6 code {
+ font-size: inherit;
+ }
+
+ h1 {
+ padding-bottom: .3em;
+ font-size: 2em;
+ border-bottom: 1px solid var(--color-secondary);
+ }
+
+ h2 {
+ padding-bottom: .3em;
+ font-size: 1.5em;
+ border-bottom: 1px solid var(--color-secondary);
+ }
+
+ h3 {
+ font-size: 1.25em;
+ }
+
+ h4 {
+ font-size: 1em;
+ }
+
+ h5 {
+ font-size: .875em;
+ }
+
+ h6 {
+ font-size: .85em;
+ color: var(--color-text-light-2);
+ }
+
+ p,
+ blockquote,
+ details,
+ ul,
+ ol,
+ dl,
+ table,
+ pre {
+ margin-top: 0;
+ margin-bottom: 16px;
+ }
+
+ hr {
+ height: 4px;
+ padding: 0;
+ margin: 16px 0;
+ background-color: var(--color-secondary);
+ border: 0;
+ }
+
+ ul,
+ ol {
+ padding-left: 2em;
+ }
+
+ ul.no-list,
+ ol.no-list {
+ padding: 0;
+ list-style-type: none;
+ }
+
+ .task-list-item {
+ list-style-type: none;
+
+ input[type="checkbox"] {
+ margin: 0 6px .25em -1.6em;
+ }
+ }
+
+ .task-list-item + .task-list-item {
+ margin-top: 3px;
+ }
+
+ input[type="checkbox"] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ position: relative;
+ border: 1px solid var(--color-secondary);
+ border-radius: 2px;
+ background: var(--color-input-background);
+ height: 14px;
+ width: 14px;
+ opacity: 1 !important; // override fomantic on edit preview
+ pointer-events: auto !important; // override fomantic on edit preview
+ vertical-align: middle !important; // override fomantic on edit preview
+ }
+
+ input[type="checkbox"]:not([disabled]):hover,
+ input[type="checkbox"]:not([disabled]):active {
+ border-color: var(--color-primary);
+ }
+
+ input[type="checkbox"]::after {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ pointer-events: none;
+ background: var(--color-text);
+ mask-size: cover;
+ -webkit-mask-size: cover;
+ }
+
+ input[type="checkbox"]:checked::after {
+ content: "";
+ mask-image: var(--checkbox-mask-checked);
+ -webkit-mask-image: var(--checkbox-mask-checked);
+ }
+
+ input[type="checkbox"]:indeterminate::after {
+ content: "";
+ mask-image: var(--checkbox-mask-indeterminate);
+ -webkit-mask-image: var(--checkbox-mask-indeterminate);
+ }
+
+ ul ul,
+ ul ol,
+ ol ol,
+ ol ul {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ ol ol,
+ ul ol {
+ list-style-type: lower-roman;
+ }
+
+ li > p {
+ margin-top: 16px;
+ }
+
+ li + li {
+ margin-top: .25em;
+ }
+
+ dl {
+ padding: 0;
+ }
+
+ dl dt {
+ padding: 0;
+ margin-top: 16px;
+ font-size: 1em;
+ font-style: italic;
+ font-weight: 600;
+ }
+
+ dl dd {
+ padding: 0 16px;
+ margin-bottom: 16px;
+ }
+
+ blockquote {
+ margin-left: 0;
+ padding: 0 15px;
+ color: var(--color-text-light-2);
+ border-left: 4px solid var(--color-secondary);
+ }
+
+ blockquote > :first-child {
+ margin-top: 0;
+ }
+
+ blockquote > :last-child {
+ margin-bottom: 0;
+ }
+
+ table {
+ display: block;
+ width: 100%;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ max-width: 100%;
+ overflow: auto;
+ }
+
+ table th {
+ font-weight: 600;
+ }
+
+ table th,
+ table td {
+ padding: 6px 13px !important;
+ border: 1px solid var(--color-secondary) !important;
+ }
+
+ table tr {
+ border-top: 1px solid var(--color-secondary);
+ }
+
+ table tr:nth-child(2n) {
+ background-color: var(--color-markup-table-row);
+ }
+
+ img {
+ max-width: 100%;
+ box-sizing: initial;
+ }
+
+ img[align="right"] {
+ padding-left: 20px;
+ }
+
+ img[align="left"] {
+ padding-right: 20px;
+ }
+
+ .emoji {
+ max-width: none;
+ vertical-align: text-top;
+ }
+
+ span.frame {
+ display: block;
+ overflow: hidden;
+ }
+
+ span.frame > span {
+ display: block;
+ float: left;
+ width: auto;
+ padding: 7px;
+ margin: 13px 0 0;
+ overflow: hidden;
+ border: 1px solid var(--color-secondary);
+ }
+
+ span.frame span img {
+ display: block;
+ float: left;
+ }
+
+ span.frame span span {
+ display: block;
+ padding: 5px 0 0;
+ clear: both;
+ color: var(--color-text);
+ }
+
+ span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+ }
+
+ span.align-center > span {
+ display: block;
+ margin: 13px auto 0;
+ overflow: hidden;
+ text-align: center;
+ }
+
+ span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+ }
+
+ span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+ }
+
+ span.align-right > span {
+ display: block;
+ margin: 13px 0 0;
+ overflow: hidden;
+ text-align: right;
+ }
+
+ span.align-right span img {
+ margin: 0;
+ text-align: right;
+ }
+
+ span.float-left {
+ display: block;
+ float: left;
+ margin-right: 13px;
+ overflow: hidden;
+ }
+
+ span.float-left span {
+ margin: 13px 0 0;
+ }
+
+ span.float-right {
+ display: block;
+ float: right;
+ margin-left: 13px;
+ overflow: hidden;
+ }
+
+ span.float-right > span {
+ display: block;
+ margin: 13px auto 0;
+ overflow: hidden;
+ text-align: right;
+ }
+
+ code,
+ tt {
+ padding: .2em .4em;
+ margin: 0;
+ font-size: 85%;
+ background-color: var(--color-markup-code-block);
+ border-radius: 4px;
+ }
+
+ code br,
+ tt br {
+ display: none;
+ }
+
+ del code {
+ text-decoration: inherit;
+ }
+
+ pre > code {
+ padding: 0;
+ margin: 0;
+ font-size: 100%;
+ white-space: pre-wrap;
+ word-break: break-all;
+ overflow-wrap: break-word;
+ background: transparent;
+ border: 0;
+ }
+
+ .highlight {
+ margin-bottom: 16px;
+ }
+
+ .highlight pre,
+ pre {
+ padding: 16px;
+ font-size: 85%;
+ line-height: 1.45;
+ background-color: var(--color-markup-code-block);
+ border-radius: 4px;
+ }
+
+ .highlight pre {
+ margin-bottom: 0;
+ word-break: normal;
+ }
+
+ pre {
+ word-wrap: normal;
+ }
+
+ pre code,
+ pre tt {
+ display: inline;
+ max-width: initial;
+ padding: 0;
+ margin: 0;
+ overflow: initial;
+ line-height: inherit;
+ word-wrap: normal;
+ background-color: transparent;
+ border: 0;
+ }
+
+ pre code::before,
+ pre code::after,
+ pre tt::before,
+ pre tt::after {
+ content: normal;
+ }
+
+ kbd {
+ display: inline-block;
+ padding: 3px 5px;
+ font-size: 11px;
+ line-height: 10px;
+ color: var(--color-text-light);
+ vertical-align: middle;
+ 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);
+ }
+
+ .ui.list .list,
+ ol.ui.list ol,
+ ul.ui.list ul {
+ padding-left: 2em;
+ }
+}
+
+.repository.wiki.revisions {
+ .ui.container > .ui.stackable.grid {
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+
+ > .header {
+ margin-top: 0;
+
+ .sub.header {
+ padding-left: 52px;
+ word-break: break-word;
+ }
+ }
+ }
+}
+
+.file-revisions-btn {
+ display: block;
+ float: left;
+ margin-bottom: 2px !important;
+ padding: 11px !important;
+ margin-right: 10px !important;
+
+ i {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+}
+
+.markup-block-error {
+ margin-bottom: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ box-shadow: none !important;
+ font-size: 85% !important;
+ white-space: pre !important;
+ padding: .5rem 1rem !important;
+ text-align: left !important;
+}
+
+.markup-block-error + pre {
+ border-top: none !important;
+ margin-top: 0 !important;
+ border-top-left-radius: 0 !important;
+ border-top-right-radius: 0 !important;
+}
--- /dev/null
+.mermaid-chart {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+ margin: 1rem auto;
+ height: auto;
+}
+
+/* mermaid's errorRenderer seems to unavoidably spew stuff into <body>, hide it */
+body > div[id*="mermaid-"] {
+ display: none !important;
+}
--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;
& + .editor-preview-side {
background: #353945;
- .markdown:not(code).ui.segment {
+ .markup.ui.segment {
border-width: 0;
}
}
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;
}
projects / gitea.git / commitdiff