enhance(markup): align markdown rendering details with GitHub (#39955)

Fixes markdown rendering details where Gitea deviated from GitHub
unintentionally, and adds a `/devtest/markdown` page to review markdown
rendering.

- Paragraphs get the intended 1.5 line height
- Blockquotes, alerts and definition lists no longer inherit browser
default margins
- Loose task lists keep their spacing, the checkbox renders inside the
paragraph like on GitHub
- Footnote references render as `[1]` so adjacent ones stay apart
without CSS
- Code in headings, headings in summaries, nested ordered lists, tables,
`<mark>`, alert icons and `<hr>` follow GitHub

Co-authored-by: bircni <bircni@icloud.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/base.css

@@ -108,6 +108,11 @@ samp,
   font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
 }
 
+mark {
+  background: var(--color-highlight-bg);
+  color: inherit;
+}
+
 @font-face {
   font-family: gitea-math-book; /* the Book weight shares its family name with the thinner Regular */
   src: local("NewComputerModernMath-Book"), local("NewCMMath-Book");
@@ -456,53 +461,6 @@ a.label,
   color: var(--color-text) !important;
 }
 
-.color-preview {
-  display: inline-block;
-  margin-left: 0.4em;
-  height: 0.67em;
-  width: 0.67em;
-  border-radius: var(--border-radius);
-}
-
-.attention-icon {
-  margin: 2px 6px 0 0;
-}
-
-blockquote.attention-note {
-  border-left-color: var(--color-info-text);
-}
-strong.attention-note, svg.attention-note {
-  color: var(--color-info-text);
-}
-
-blockquote.attention-tip {
-  border-left-color: var(--color-success-text);
-}
-strong.attention-tip, svg.attention-tip {
-  color: var(--color-success-text);
-}
-
-blockquote.attention-important {
-  border-left-color: var(--color-priority-text);
-}
-strong.attention-important, svg.attention-important {
-  color: var(--color-priority-text);
-}
-
-blockquote.attention-warning {
-  border-left-color: var(--color-warning-text);
-}
-strong.attention-warning, svg.attention-warning {
-  color: var(--color-warning-text);
-}
-
-blockquote.attention-caution {
-  border-left-color: var(--color-error-text);
-}
-strong.attention-caution, svg.attention-caution {
-  color: var(--color-error-text);
-}
-
 /* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
 .center {
   text-align: center;

web_src/css/index.css

@@ -49,6 +49,7 @@
 @import "./features/console.css";
 @import "./features/captcha.css";
 
+@import "./markup/attention.css";
 @import "./markup/content.css";
 @import "./markup/codeblock.css";
 @import "./markup/codepreview.css";

web_src/css/markup/attention.css

@@ -0,0 +1,43 @@
+.attention-header > p:first-child {
+  display: flex;
+  align-items: center;
+}
+
+.attention-icon {
+  margin-inline-end: 6px;
+}
+
+blockquote.attention-note {
+  border-left-color: var(--color-info-text);
+}
+strong.attention-note, svg.attention-note {
+  color: var(--color-info-text);
+}
+
+blockquote.attention-tip {
+  border-left-color: var(--color-success-text);
+}
+strong.attention-tip, svg.attention-tip {
+  color: var(--color-success-text);
+}
+
+blockquote.attention-important {
+  border-left-color: var(--color-priority-text);
+}
+strong.attention-important, svg.attention-important {
+  color: var(--color-priority-text);
+}
+
+blockquote.attention-warning {
+  border-left-color: var(--color-warning-text);
+}
+strong.attention-warning, svg.attention-warning {
+  color: var(--color-warning-text);
+}
+
+blockquote.attention-caution {
+  border-left-color: var(--color-error-text);
+}
+strong.attention-caution, svg.attention-caution {
+  color: var(--color-error-text);
+}

web_src/css/markup/content.css

@@ -86,6 +86,7 @@
 .markup h5 code,
 .markup h6 tt,
 .markup h6 code {
+  padding: 0 0.2em;
   font-size: inherit;
 }
 
@@ -118,6 +119,16 @@
   color: var(--color-text-light-2);
 }
 
+.markup summary :is(h1, h2, h3, h4, h5, h6) {
+  display: inline-block;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.markup summary .anchor {
+  margin-inline-start: -40px; /* clear the disclosure marker */
+}
+
 .markup p,
 .markup blockquote,
 .markup details,
@@ -138,8 +149,12 @@ In markup content, we always use bottom margin for all elements */
   margin-bottom: 16px;
 }
 
+.markup p {
+  line-height: inherit; /* override base.css */
+}
+
 .markup hr {
-  height: 4px;
+  height: 1px;
   padding: 0;
   margin: 16px 0;
   background-color: var(--color-secondary);
@@ -159,10 +174,6 @@ In markup content, we always use bottom margin for all elements */
   margin-top: 4px;
 }
 
-.markup .task-list-item p + ul {
-  margin-top: 16px;
-}
-
 .markup .task-list-item input[type="checkbox"] {
   margin-bottom: 0.25em;
   margin-inline: -1.4em 0.6em;
@@ -170,13 +181,10 @@ In markup content, we always use bottom margin for all elements */
   padding: 0;
 }
 
-.markup .task-list-item input[type="checkbox"] + p {
-  margin-inline-start: -0.2em;
-  display: inline;
-}
-
-.markup .task-list-item > p {
-  margin-inline: 16px;
+/* a paragraph with another direction than its list has no list padding to hang the checkbox into */
+.markup :is(ul, ol):dir(ltr) > .task-list-item > p:dir(rtl) > input[type="checkbox"]:first-child,
+.markup :is(ul, ol):dir(rtl) > .task-list-item > p:dir(ltr) > input[type="checkbox"]:first-child {
+  margin-inline-start: 0;
 }
 
 .markup .task-list-item + .task-list-item {
@@ -200,11 +208,14 @@ In markup content, we always use bottom margin for all elements */
   margin-bottom: 0;
 }
 
-.markup ol ol,
-.markup ul ol {
+.markup :is(ol, ul) ol:not([type]) {
   list-style-type: lower-roman;
 }
 
+.markup :is(ol, ul) :is(ol, ul) ol:not([type]) {
+  list-style-type: lower-alpha;
+}
+
 .markup li > p {
   margin-top: 16px;
 }
@@ -225,13 +236,18 @@ In markup content, we always use bottom margin for all elements */
   font-weight: var(--font-weight-semibold);
 }
 
+.markup dl dt + dt {
+  margin-top: 0;
+}
+
 .markup dl dd {
   padding: 0 16px;
+  margin-inline-start: 0;
   margin-bottom: 16px;
 }
 
 .markup blockquote {
-  margin-inline-start: 0;
+  margin-inline: 0;
   padding: 0 15px;
   color: var(--color-text-light-2);
   border-left: 0.25em solid var(--color-secondary);
@@ -250,6 +266,11 @@ In markup content, we always use bottom margin for all elements */
   width: 100%;
   max-width: 100%;
   overflow: auto;
+  font-variant: tabular-nums;
+}
+
+.markup table td > :last-child {
+  margin-bottom: 0;
 }
 
 .markup table th {
@@ -297,17 +318,8 @@ html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
   padding: 0; /* let the file-not-rendered-prompt layout itself */
 }
 
-/* this background ensures images can break <hr>. We can only do this on
-   cases where the background is known and not transparent. */
-.file-view.markup img,
-.file-view.markup video,
-.comment-body .markup img, /* regular comment */
-.comment-body .markup video,
-.comment-content .markup img, /* code comment */
-.comment-content .markup video,
-.wiki .markup img,
-.wiki .markup video {
-  background: var(--color-box-body);
+.markup :is(h1, h2, hr) {
+  display: flow-root; /* keep borders clear of floated images */
 }
 
 .markup img[align="right"],
@@ -401,6 +413,7 @@ html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
   background-color: var(--color-markup-code-inline);
   border: 1px solid var(--color-secondary);
   border-radius: var(--border-radius);
+  max-width: 100%;
 }
 
 .markup details.frontmatter-content summary {
@@ -511,3 +524,11 @@ the manually written code-block elements on "packages" pages don't have the cont
 .markup .auto-hide-control .ui.button:active {
   background: var(--color-secondary-dark-1) !important;
 }
+
+.markup .color-preview {
+  display: inline-block;
+  margin-left: 0.4em;
+  height: 0.67em;
+  width: 0.67em;
+  border-radius: var(--border-radius);
+}