Fix code tag style problem and LFS view bug (go-gitea#35628) (go-gitea#35636)

Backport go-gitea#35628 by lutinglt

Signed-off-by: 鲁汀 <[email protected]>
Co-authored-by: 鲁汀 <[email protected]>
Co-authored-by: wxiaoguang <[email protected]>

Author: 3 people

routers/web/repo/setting/lfs.go

@@ -270,8 +270,7 @@ func LFSFileGet(ctx *context.Context) {
 	// FIXME: there is no IsPlainText set, but template uses it
 	ctx.Data["IsTextFile"] = st.IsText()
 	ctx.Data["FileSize"] = meta.Size
-	// FIXME: the last field is the URL-base64-encoded filename, it should not be "direct"
-	ctx.Data["RawFileLink"] = fmt.Sprintf("%s%s/%s.git/info/lfs/objects/%s/%s", setting.AppURL, url.PathEscape(ctx.Repo.Repository.OwnerName), url.PathEscape(ctx.Repo.Repository.Name), url.PathEscape(meta.Oid), "direct")
+	ctx.Data["RawFileLink"] = fmt.Sprintf("%s/%s/%s.git/info/lfs/objects/%s", setting.AppSubURL, url.PathEscape(ctx.Repo.Repository.OwnerName), url.PathEscape(ctx.Repo.Repository.Name), url.PathEscape(meta.Oid))
 	switch {
 	case st.IsRepresentableAsText():
 		if meta.Size >= setting.UI.MaxDisplayFileSize {

templates/admin/config.tmpl

@@ -252,9 +252,9 @@
 				{{end}}
 				{{if .CacheConn}}
 					<dt>{{ctx.Locale.Tr "admin.config.cache_conn"}}</dt>
-					<dd><code>{{.CacheConn}}</code></dd>
+					<dd>{{.CacheConn}}</dd>
 					<dt>{{ctx.Locale.Tr "admin.config.cache_item_ttl"}}</dt>
-					<dd><code>{{.CacheItemTTL}}</code></dd>
+					<dd>{{.CacheItemTTL}}</dd>
 				{{end}}
 				<div class="divider"></div>
 				<dt class="tw-py-1 tw-flex tw-items-center">{{ctx.Locale.Tr "admin.config.cache_test"}}</dt>
@@ -275,7 +275,7 @@
 				<dt>{{ctx.Locale.Tr "admin.config.session_provider"}}</dt>
 				<dd>{{.SessionConfig.Provider}}</dd>
 				<dt>{{ctx.Locale.Tr "admin.config.provider_config"}}</dt>
-				<dd><code>{{if .SessionConfig.ProviderConfig}}{{.SessionConfig.ProviderConfig}}{{else}}-{{end}}</code></dd>
+				<dd>{{if .SessionConfig.ProviderConfig}}{{.SessionConfig.ProviderConfig}}{{else}}-{{end}}</dd>
 				<dt>{{ctx.Locale.Tr "admin.config.cookie_name"}}</dt>
 				<dd>{{.SessionConfig.CookieName}}</dd>
 				<dt>{{ctx.Locale.Tr "admin.config.gc_interval_time"}}</dt>
@@ -301,7 +301,7 @@
 				<dt>{{ctx.Locale.Tr "admin.config.git_max_diff_files"}}</dt>
 				<dd>{{.Git.MaxGitDiffFiles}}</dd>
 				<dt>{{ctx.Locale.Tr "admin.config.git_gc_args"}}</dt>
-				<dd><code>{{.Git.GCArgs}}</code></dd>
+				<dd>{{.Git.GCArgs}}</dd>
 
 				<div class="divider"></div>
 
@@ -330,7 +330,7 @@
 
 				{{if .Loggers.access.IsEnabled}}
 					<dt>{{ctx.Locale.Tr "admin.config.access_log_template"}}</dt>
-					<dd><code>{{$.AccessLogTemplate}}</code></dd>
+					<dd>{{$.AccessLogTemplate}}</dd>
 				{{end}}
 
 				{{range $loggerName, $loggerDetail := .Loggers}}

templates/admin/stacktrace-row.tmpl

@@ -46,8 +46,8 @@
 								<div class="item tw-flex tw-items-center">
 									<span class="icon tw-mr-4">{{svg "octicon-dot-fill" 16}}</span>
 									<div class="content tw-flex-1">
-										<div class="header"><code>{{.Function}}</code></div>
-										<div class="description"><code>{{.File}}:{{.Line}}</code></div>
+										<div class="header">{{.Function}}</div>
+										<div class="description">{{.File}}:{{.Line}}</div>
 									</div>
 								</div>
 							{{end}}

templates/base/alert_details.tmpl

@@ -2,7 +2,7 @@
 {{if .Details}}
 <details>
 	<summary>{{.Summary}}</summary>
-	<code>{{.Details | SanitizeHTML}}</code>
+	{{.Details | SanitizeHTML}}
 </details>
 {{else}}
 <div>

templates/projects/view.tmpl

@@ -65,7 +65,9 @@
 	</div>
 
 	<div class="ui container project-description">
-		{{$.Project.RenderedContent}}
+		<div class="render-content markup">
+			{{$.Project.RenderedContent}}
+		</div>
 		<div class="divider"></div>
 	</div>
 

templates/repo/settings/lfs_file.tmpl

@@ -39,7 +39,7 @@
 							<tbody>
 								<tr>
 									<td class="lines-num">{{.LineNums}}</td>
-									<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol>{{.FileContent}}</ol></code></pre></td>
+									<td class="lines-code"><pre>{{.FileContent}}</pre></td>
 								</tr>
 							</tbody>
 						</table>

templates/repo/settings/webhook/history.tmpl

@@ -68,7 +68,7 @@
 {{range $key, $val := .RequestInfo.Headers}}<strong>{{$key}}:</strong> {{$val}}
 {{end}}</pre>
 								<h5>{{ctx.Locale.Tr "repo.settings.webhook.payload"}}</h5>
-								<pre class="webhook-info"><code class="json">{{or .RequestInfo.Body .PayloadContent}}</code></pre>
+								<pre class="webhook-info">{{or .RequestInfo.Body .PayloadContent}}</pre>
 							{{else}}
 								-
 							{{end}}
@@ -79,7 +79,7 @@
 								<pre class="webhook-info">{{range $key, $val := .ResponseInfo.Headers}}<strong>{{$key}}:</strong> {{$val}}
 {{end}}</pre>
 								<h5>{{ctx.Locale.Tr "repo.settings.webhook.body"}}</h5>
-								<pre class="webhook-info"><code>{{.ResponseInfo.Body}}</code></pre>
+								<pre class="webhook-info">{{.ResponseInfo.Body}}</pre>
 							{{else}}
 								-
 							{{end}}

templates/user/settings/keys_gpg.tmpl

@@ -21,8 +21,8 @@
 					<label for="token">{{ctx.Locale.Tr "settings.gpg_token"}}</label>
 					<input readonly="" value="{{.TokenToSign}}">
 					<div class="help">
-						<p>{{ctx.Locale.Tr "settings.gpg_token_help"}}</p>
-						<p><code>{{printf `echo "%s" | gpg -a --default-key %s --detach-sig` .TokenToSign .PaddedKeyID}}</code></p>
+						{{ctx.Locale.Tr "settings.gpg_token_help"}}
+						<pre class="command-block">{{printf `echo "%s" | gpg -a --default-key %s --detach-sig` .TokenToSign .PaddedKeyID}}</pre>
 					</div>
 				</div>
 				<div class="field">
@@ -89,8 +89,8 @@
 							<label for="token">{{ctx.Locale.Tr "settings.gpg_token"}}</label>
 							<input readonly="" value="{{$.TokenToSign}}">
 							<div class="help">
-								<p>{{ctx.Locale.Tr "settings.gpg_token_help"}}</p>
-								<p><code>{{printf `echo "%s" | gpg -a --default-key %s --detach-sig` $.TokenToSign .PaddedKeyID}}</code></p>
+								{{ctx.Locale.Tr "settings.gpg_token_help"}}
+								<pre class="command-block">{{printf `echo "%s" | gpg -a --default-key %s --detach-sig` $.TokenToSign .PaddedKeyID}}</pre>
 							</div>
 							<br>
 						</div>

templates/user/settings/keys_ssh.tmpl

@@ -77,16 +77,15 @@
 							<label for="token">{{ctx.Locale.Tr "settings.ssh_token"}}</label>
 							<input readonly="" value="{{$.TokenToSign}}">
 							<div class="help">
-								<p>{{ctx.Locale.Tr "settings.ssh_token_help"}}</p>
-								<p><code>echo -n '{{$.TokenToSign}}' | ssh-keygen -Y sign -n gitea -f /path_to_PrivateKey_or_RelatedPublicKey</code></p>
+								{{ctx.Locale.Tr "settings.ssh_token_help"}}
+								<pre class="command-block">echo -n '{{$.TokenToSign}}' | ssh-keygen -Y sign -n gitea -f /path_to_PrivateKey_or_RelatedPublicKey</pre>
 								<details>
 									<summary>Windows PowerShell</summary>
-									<p><code>cmd /c "&lt;NUL set /p=`"{{$.TokenToSign}}`"| ssh-keygen -Y sign -n gitea -f /path_to_PrivateKey_or_RelatedPublicKey"</code></p>
+									<pre class="command-block">cmd /c "&lt;NUL set /p=`"{{$.TokenToSign}}`"| ssh-keygen -Y sign -n gitea -f /path_to_PrivateKey_or_RelatedPublicKey"</pre>
 								</details>
-								<br>
 								<details>
 									<summary>Windows CMD</summary>
-									<p><code>set /p={{$.TokenToSign}}| ssh-keygen -Y sign -n gitea -f /path_to_PrivateKey_or_RelatedPublicKey</code></p>
+									<pre class="command-block">set /p={{$.TokenToSign}}| ssh-keygen -Y sign -n gitea -f /path_to_PrivateKey_or_RelatedPublicKey</pre>
 								</details>
 							</div>
 							<br>

web_src/css/base.css

@@ -101,11 +101,13 @@ samp,
   font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
 }
 
-code {
+/* there are many <code> blocks in non-markup(.markup code) / non-code-diff(code.code-inner) containers (for example: translation strings, etc),
+so we need to make <code> have default global styles, ".markup code" has its own styles and doesn't conflict, but `.code-inner` is special.
+TODO: in the future, we should use `div` instead of `code` for `.code-inner` because it is a container for highlighted code line */
+code:not(.code-inner) {
   padding: 1px 4px;
   border-radius: var(--border-radius);
   background-color: var(--color-label-bg);
-  color: var(--color-label-text);
 }
 
 b,