diff --git a/remote_judger/src/providers/codeforces.ts b/remote_judger/src/providers/codeforces.ts
index cfd3f50..fd0d549 100644
--- a/remote_judger/src/providers/codeforces.ts
+++ b/remote_judger/src/providers/codeforces.ts
@@ -419,24 +419,21 @@ export default class CodeforcesProvider implements IBasicProvider {
         const remote_handle = stripHtml(body.partyName).result;
         const details =
           '<div>' +
-          '<div class="border-bottom p-3">' +
-          '<table class="table w-auto mb-0 caption-top">' +
-          '<caption class="fw-bold text-body mb-1 pt-0">远端信息</caption>' +
-          '<tbody class="border-top">' +
+          '<remote-result-container>' +
+          '<remote-result-table>' +
           Object.entries({
             比赛: stripHtml(body.contestName).result,
             题目: stripHtml(body.problemName).result,
-            提交记录: `<a href="https://codeforces.com${body.href}" target="_blank">${id}</a>`,
-            账号: `<a href="https://codeforces.com/profile/${remote_handle}" target="_blank">${remote_handle}</a>`,
+            提交记录: `<a href="https://codeforces.com${body.href}">${id}</a>`,
+            账号: `<a href="https://codeforces.com/profile/${remote_handle}">${remote_handle}</a>`,
             状态: stripHtml(body.verdict).result,
           })
             .map(
-              o => `<tr><td class="fw-bold">${o[0]}</td><td>${o[1]}</td></tr>`
+              o => `<remote-result-tr name="${o[0]}">${o[1]}</remote-result-tr>`
             )
             .join('') +
-          '</tbody>' +
-          '</table>' +
-          '</div>' +
+          '</remote-result-table>' +
+          '</remote-result-container>' +
           `<tests>${tests.join('\n')}</tests>` +
           '</div>';
 
diff --git a/remote_judger/src/providers/loj.ts b/remote_judger/src/providers/loj.ts
index e4bb753..55aed4a 100644
--- a/remote_judger/src/providers/loj.ts
+++ b/remote_judger/src/providers/loj.ts
@@ -461,37 +461,29 @@ export default class LibreojProvider implements IBasicProvider {
         let details = '';
 
         details +=
-          '<div class="border-bottom p-3">' +
-          '<table class="table w-auto mb-0 caption-top">' +
-          '<caption class="fw-bold text-body mb-1 pt-0">远端信息</caption>' +
-          '<tbody class="border-top">' +
+          '<remote-result-container>' +
+          '<remote-result-table>' +
           Object.entries({
-            题目: `<a href="https://loj.ac/p/${
-              body.meta.problem.displayId
-            }" target="_blank">#${
+            题目: `<a href="https://loj.ac/p/${body.meta.problem.displayId}">#${
               body.meta.problem.displayId
             }. ${htmlspecialchars(body.meta.problemTitle)}</a>`,
-            提交记录: `<a href="https://loj.ac/s/${id}" target="_blank">${id}</a>`,
+            提交记录: `<a href="https://loj.ac/s/${id}">${id}</a>`,
             提交时间: new Date(body.meta.submitTime).toLocaleString('zh-CN'),
-            账号: `<a href="https://loj.ac/user/${body.meta.submitter.id}" target="_blank">${body.meta.submitter.username}</a>`,
+            账号: `<a href="https://loj.ac/user/${body.meta.submitter.id}">${body.meta.submitter.username}</a>`,
             状态: status,
           })
             .map(
-              o => `<tr><td class="fw-bold">${o[0]}</td><td>${o[1]}</td></tr>`
+              o => `<remote-result-tr name="${o[0]}">${o[1]}</remote-result-tr>`
             )
             .join('') +
-          '</tbody>' +
-          '</table>' +
-          '</div>';
+          '</remote-result-table>' +
+          '</remote-result-container>';
 
         if (result_show_source) {
           details +=
-            '<div class="border-bottom p-3">' +
-            '<div class="fw-bold mb-2">源代码</div>' +
-            `<pre><code class="language-${body.content.language} bg-light rounded p-3">` +
+            `<remote-source-code language="${body.content.language}">` +
             htmlspecialchars(parse(body.content.code)) +
-            '</code></pre>' +
-            '</div>';
+            '</remote-source-code>';
         }
 
         // Samples
diff --git a/remote_judger/src/providers/luogu.ts b/remote_judger/src/providers/luogu.ts
index 34824de..e20e8c1 100644
--- a/remote_judger/src/providers/luogu.ts
+++ b/remote_judger/src/providers/luogu.ts
@@ -295,28 +295,23 @@ export default class LuoguProvider implements IBasicProvider {
         let details = '';
 
         details +=
-          '<div class="border-bottom p-3">' +
-          '<table class="table w-auto mb-0 caption-top">' +
-          '<caption class="fw-bold text-body mb-1 pt-0">远端信息</caption>' +
-          '<tbody class="border-top">' +
+          '<remote-result-container>' +
+          '<remote-result-table>' +
           Object.entries({
             题目: `<a href="https://www.luogu.com.cn/problem/${
               data.problem.pid
-            }" target="_blank">${data.problem.pid} ${htmlspecialchars(
-              data.problem.title
-            )}</a>`,
-            提交记录: `<a href="https://www.luogu.com.cn/record/${id}" target="_blank">R${id}</a>`,
+            }">${data.problem.pid} ${htmlspecialchars(data.problem.title)}</a>`,
+            提交记录: `<a href="https://www.luogu.com.cn/record/${id}">R${id}</a>`,
             提交时间: new Date(data.submitTime * 1000).toLocaleString('zh-CN'),
-            账号: `<a href="https://www.luogu.com.cn/user/${data.user.uid}" target="_blank">${data.user.name}</a>`,
+            账号: `<a href="https://www.luogu.com.cn/user/${data.user.uid}">${data.user.name}</a>`,
             状态: status,
           })
             .map(
-              o => `<tr><td class="fw-bold">${o[0]}</td><td>${o[1]}</td></tr>`
+              o => `<remote-result-tr name="${o[0]}">${o[1]}</remote-result-tr>`
             )
             .join('') +
-          '</tbody>' +
-          '</table>' +
-          '</div>';
+          '</remote-result-table>' +
+          '</remote-result-container>';
 
         if (data.detail.judgeResult.subtasks.length === 1) {
           details += Object.entries(
diff --git a/web/app/libs/uoj-html-lib.php b/web/app/libs/uoj-html-lib.php
index 152819c..05302ec 100644
--- a/web/app/libs/uoj-html-lib.php
+++ b/web/app/libs/uoj-html-lib.php
@@ -410,6 +410,33 @@ class JudgmentDetailsPrinter {
 			echo '<pre class="bg-light rounded p-3">', "\n";
 			$this->_print_c($node);
 			echo "\n</pre>";
+		} elseif ($node->nodeName == 'remote-result-container') {
+			echo '<div class="border-bottom p-3">';
+			$this->_print_c($node);
+			echo '</div>';
+		} elseif ($node->nodeName == 'remote-result-table') {
+			echo '<table class="table w-auto mb-0 caption-top">';
+			echo '<caption class="fw-bold text-body mb-1 pt-0">远端信息</caption>';
+			echo '<tbody class="border-top">';
+			$this->_print_c($node);
+			echo '</tbody>';
+			echo '</table>';
+		} elseif ($node->nodeName == 'remote-result-tr') {
+			$name = $node->getAttribute("name");
+			echo '<tr>';
+			echo '<td class="fw-bold">', $name, '</td>';
+			echo '<td>';
+			$this->_print_c($node);
+			echo '</td>';
+			echo '</tr>';
+		} elseif ($node->nodeName == 'remote-source-code') {
+			$language = $node->getAttribute("language");
+			echo '<div class="border-bottom p-3">';
+			echo '<div class="fw-bold mb-2">源代码</div>';
+			echo '<pre><code class="language-', $language, ' bg-light mb-0 rounded">';
+			$this->_print_c($node);
+			echo "</code></pre>";
+			echo '</div>';
 		} elseif ($node->nodeName == 'tests') {
 			if ($node->hasAttribute("errcode")) {
 				echo "<pre>", "Judgment Failed. Error Code: ", $node->getAttribute("errcode"), ".</pre>";