diff --git a/deepsearcher/templates/html/index.html b/deepsearcher/templates/html/index.html
index f9591d0..f9620c7 100644
--- a/deepsearcher/templates/html/index.html
+++ b/deepsearcher/templates/html/index.html
@@ -1,88 +1,243 @@
 <!DOCTYPE html>
 <html lang="zh">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
     <title>DeepSearcher - 智能搜索系统</title>
-    <link rel="stylesheet" href="../static/css/styles.css">
-</head>
-<body>
+    <link
+      rel="stylesheet"
+      href="../static/css/styles.css"
+    />
+    <link
+      rel="stylesheet"
+      id="md-theme"
+      href="../static/themes/light.css"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
+  </head>
+  <body>
     <div class="container">
-        <header>
-            <h1>DeepSearcher 智能搜索系统</h1>
-            <p class="app-description">基于大型语言模型和向量数据库的企业知识管理系统，支持私有数据搜索和在线内容整合，提供准确答案和综合报告。</p>
-        </header>
+      <header>
+        <h1>DeepSearcher 智能搜索系统</h1>
+        <p class="app-description">
+          基于大型语言模型和向量数据库的企业知识管理系统，支持私有数据搜索和在线内容整合，提供准确答案和综合报告。
+        </p>
+      </header>
 
-        <main>
-            <div class="card">
-                <h2 class="card-title">文件加载</h2>
-                <div class="form-group">
-                    <label for="filePaths">文件路径（多个路径用逗号分隔）</label>
-                    <input type="text" id="filePaths" placeholder="例如: /path/to/file1.pdf,/path/to/file2.txt">
-                </div>
-                <div class="form-group">
-                    <label for="collectionName">集合名称（可选）</label>
-                    <input type="text" id="collectionName" placeholder="例如: my_collection">
-                </div>
-                <div class="form-group">
-                    <label for="collectionDesc">集合描述（可选）</label>
-                    <textarea id="collectionDesc" rows="2" placeholder="例如: 这是一个测试集合"></textarea>
-                </div>
-                <button id="loadFilesBtn">加载文件</button>
-                <div id="loadStatus" class="status"></div>
-            </div>
+      <main>
+        <div class="card">
+          <h2 class="card-title">文件加载</h2>
+          <div class="form-group">
+            <label for="filePaths">文件路径（多个路径用逗号分隔）</label>
+            <input
+              type="text"
+              id="filePaths"
+              placeholder="例如: /path/to/file1.pdf,/path/to/file2.txt"
+            />
+          </div>
+          <div class="form-group">
+            <label for="collectionName">集合名称（可选）</label>
+            <input
+              type="text"
+              id="collectionName"
+              placeholder="例如: my_collection"
+            />
+          </div>
+          <div class="form-group">
+            <label for="collectionDesc">集合描述（可选）</label>
+            <textarea
+              id="collectionDesc"
+              rows="2"
+              placeholder="例如: 这是一个测试集合"
+            ></textarea>
+          </div>
+          <button id="loadFilesBtn">加载文件</button>
+          <div
+            id="loadStatus"
+            class="status"
+          ></div>
+        </div>
 
-            <div class="card">
-                <h2 class="card-title">网站内容加载</h2>
-                <div class="form-group">
-                    <label for="websiteUrls">网站URL（多个URL用逗号分隔）</label>
-                    <input type="text" id="websiteUrls" placeholder="例如: https://example.com/page1,https://example.com/page2">
-                </div>
-                <div class="form-group">
-                    <label for="webCollectionName">集合名称（可选）</label>
-                    <input type="text" id="webCollectionName" placeholder="例如: web_collection">
-                </div>
-                <div class="form-group">
-                    <label for="webCollectionDesc">集合描述（可选）</label>
-                    <textarea id="webCollectionDesc" rows="2" placeholder="例如: 来自网站的内容"></textarea>
-                </div>
-                <button id="loadWebsiteBtn">加载网站内容</button>
-                <div id="webLoadStatus" class="status"></div>
-            </div>
+        <div class="card">
+          <h2 class="card-title">网站内容加载</h2>
+          <div class="form-group">
+            <label for="websiteUrls">网站URL（多个URL用逗号分隔）</label>
+            <input
+              type="text"
+              id="websiteUrls"
+              placeholder="例如: https://example.com/page1,https://example.com/page2"
+            />
+          </div>
+          <div class="form-group">
+            <label for="webCollectionName">集合名称（可选）</label>
+            <input
+              type="text"
+              id="webCollectionName"
+              placeholder="例如: web_collection"
+            />
+          </div>
+          <div class="form-group">
+            <label for="webCollectionDesc">集合描述（可选）</label>
+            <textarea
+              id="webCollectionDesc"
+              rows="2"
+              placeholder="例如: 来自网站的内容"
+            ></textarea>
+          </div>
+          <button id="loadWebsiteBtn">加载网站内容</button>
+          <div
+            id="webLoadStatus"
+            class="status"
+          ></div>
+        </div>
+
+        <div class="card">
+          <h2 class="card-title">智能查询</h2>
+          <div class="form-group">
+            <label for="queryText">请输入您的问题</label>
+            <textarea
+              id="queryText"
+              rows="3"
+              placeholder="例如: 请生成一份关于人工智能发展趋势的报告"
+            ></textarea>
+          </div>
+          <div class="form-group">
+            <label for="maxIter">最大迭代次数 (1-10)</label>
+            <input
+              type="number"
+              id="maxIter"
+              min="1"
+              max="10"
+              value="3"
+            />
+          </div>
+          <button id="queryBtn">执行查询</button>
+          <button
+            id="clearMessagesBtn"
+            style="margin-left: 10px; background-color: var(--text-secondary)"
+          >
+            清空消息
+          </button>
+          <div
+            id="queryStatus"
+            class="status"
+          ></div>
+
+          <div
+            id="queryResult"
+            class="result-container"
+          >
+            <h3>查询结果:</h3>
+            <div
+              class="query-result markdown-body"
+              id="resultText"
+            ></div>
+
+            <button
+              class="theme-button"
+              onclick="changeTheme('static/themes/light.css')"
+            >
+              light
+            </button>
+            <button
+              class="theme-button"
+              onclick="changeTheme('static/themes/github.css')"
+            >
+              GitHub
+            </button>
+            <button
+              class="theme-button"
+              onclick="changeTheme('static/themes/newsprint.css')"
+            >
+              Newsprint
+            </button>
+            <button
+              class="theme-button"
+              onclick="changeTheme('static/themes/pixyll.css')"
+            >
+              Pixyll
+            </button>
+            <button
+              class="theme-button"
+              onclick="changeTheme('static/themes/whitey.css')"
+            >
+              Whitey
+            </button>
 
-            <div class="card">
-                <h2 class="card-title">智能查询</h2>
-                <div class="form-group">
-                    <label for="queryText">请输入您的问题</label>
-                    <textarea id="queryText" rows="3" placeholder="例如: 请生成一份关于人工智能发展趋势的报告"></textarea>
-                </div>
-                <div class="form-group">
-                    <label for="maxIter">最大迭代次数 (1-10)</label>
-                    <input type="number" id="maxIter" min="1" max="10" value="3">
-                </div>
-                <button id="queryBtn">执行查询</button>
-                <button id="clearMessagesBtn" style="margin-left: 10px; background-color: var(--text-secondary);">清空消息</button>
-                <div id="queryStatus" class="status"></div>
-                
-                <div id="queryResult" class="result-container">
-                    <h3>查询结果:</h3>
-                    <div class="query-result" id="resultText"></div>
-                </div>
-                
-                <div id="processResult" class="result-container">
-                    <h3>处理过程:</h3>
-                    <div id="messageStream" class="message-stream">
-                        <div class="message-container" id="messageContainer"></div>
-                    </div>
-                </div>
+            <button
+              class="theme-button"
+              onclick="changeTheme('static/themes/latex.css')"
+            >
+              latex
+            </button>
+
+            <button
+              id="download-btn"
+              class="theme-button"
+              onclick="downloadPdf()"
+            >
+              下载
+            </button>
+          </div>
+
+          <div
+            id="processResult"
+            class="result-container"
+          >
+            <h3>处理过程:</h3>
+            <div
+              id="messageStream"
+              class="message-stream"
+            >
+              <div
+                class="message-container"
+                id="messageContainer"
+              ></div>
             </div>
-        </main>
+          </div>
+        </div>
+      </main>
 
-        <footer>
-            <p>DeepSearcher © 2025 | 企业知识管理与智能问答系统</p>
-        </footer>
+      <footer>
+        <p>DeepSearcher © 2025 | 企业知识管理与智能问答系统</p>
+      </footer>
     </div>
 
     <script src="../static/js/app.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <script>
+      // fetch('../static/data/test.txt').then((res) => {
+      //   res.text().then((text) => {
+      //     console.log(text);
+      //     document.getElementById('queryResult').innerHTML = marked.parse(text);
+      //   });
+      // });
+
+      function changeTheme(url) {
+        document.getElementById('md-theme').setAttribute('href', url);
+      }
+
+      function downloadPdf() {
+        const element = document.getElementById('resultText');
+
+        const opt = {
+          margin: 12,
+          filename: '内容.pdf',
+          image: { type: 'jpeg', quality: 0.98 },
+          html2canvas: { scale: 2 }, // 提高清晰度
+          jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
+          pagebreak: {
+            mode: ['css', 'legacy'],
+            avoid: '.page-break-avoid'
+          }
+        };
+
+        html2pdf().set(opt).from(element).save();
+      }
+    </script>
+  </body>
+</html>
diff --git a/deepsearcher/templates/index.html b/deepsearcher/templates/index.html
deleted file mode 100644
index 20af32f..0000000
--- a/deepsearcher/templates/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DeepSearcher - 智能搜索系统</title>
-    <link rel="stylesheet" href="static/css/styles.css">
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>DeepSearcher 智能搜索系统</h1>
-            <p class="app-description">基于大型语言模型和向量数据库的企业知识管理系统，支持私有数据搜索和在线内容整合，提供准确答案和综合报告。</p>
-        </header>
-
-        <main>
-            <div class="card">
-                <h2 class="card-title">文件加载</h2>
-                <div class="form-group">
-                    <label for="filePaths">文件路径（多个路径用逗号分隔）</label>
-                    <input type="text" id="filePaths" placeholder="例如: /path/to/file1.pdf,/path/to/file2.txt">
-                </div>
-                <div class="form-group">
-                    <label for="collectionName">集合名称</label>
-                    <input type="text" id="collectionName" placeholder="例如: my_collection">
-                </div>
-                <div class="form-group">
-                    <label for="collectionDesc">集合描述</label>
-                    <textarea id="collectionDesc" rows="2" placeholder="例如: 这是一个测试集合"></textarea>
-                </div>
-                <button id="loadFilesBtn">加载文件</button>
-                <div id="loadStatus" class="status"></div>
-            </div>
-
-            <div class="card">
-                <h2 class="card-title">网站加载</h2>
-                <div class="form-group">
-                    <label for="websiteUrls">网站URL（多个URL用逗号分隔）</label>
-                    <input type="text" id="websiteUrls" placeholder="例如: https://example.com/page1,https://example.com/page2">
-                </div>
-                <div class="form-group">
-                    <label for="webCollectionName">集合名称</label>
-                    <input type="text" id="webCollectionName" placeholder="例如: web_collection">
-                </div>
-                <div class="form-group">
-                    <label for="webCollectionDesc">集合描述</label>
-                    <textarea id="webCollectionDesc" rows="2" placeholder="例如: 来自网站的内容"></textarea>
-                </div>
-                <button id="loadWebsiteBtn">加载网站</button>
-                <div id="webLoadStatus" class="status"></div>
-            </div>
-
-            <div class="card">
-                <h2 class="card-title">智能查询</h2>
-                <div class="form-group">
-                    <label for="queryText">请输入您的问题</label>
-                    <textarea id="queryText" rows="3" placeholder="例如: 请生成一份关于人工智能发展趋势的报告"></textarea>
-                </div>
-                <div class="form-group">
-                    <label for="maxIter">最大迭代次数 (1-10)</label>
-                    <input type="number" id="maxIter" min="1" max="10" value="3">
-                </div>
-                <button id="queryBtn">执行查询</button>
-                <button id="clearMessagesBtn" style="margin-left: 10px; background-color: var(--text-secondary);">清空消息</button>
-                <div id="queryStatus" class="status"></div>
-                
-                <div id="queryResult" class="result-container">
-                    <h3>查询结果:</h3>
-                    <div class="query-result" id="resultText"></div>
-                </div>
-                
-                <div id="processResult" class="result-container">
-                    <h3>处理过程:</h3>
-                    <div id="messageStream" class="message-stream">
-                        <div class="message-container" id="messageContainer"></div>
-                    </div>
-                </div>
-            </div>
-        </main>
-
-        <footer>
-            <p>DeepSearcher © 2025 | 企业知识管理与智能问答系统</p>
-        </footer>
-    </div>
-
-    <script src="static/js/app.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/deepsearcher/templates/static/css/styles.css b/deepsearcher/templates/static/css/styles.css
index 29175ab..1c408c1 100644
--- a/deepsearcher/templates/static/css/styles.css
+++ b/deepsearcher/templates/static/css/styles.css
@@ -1,280 +1,297 @@
 :root {
-    --primary-color: #4f46e5;
-    --secondary-color: #f9fafb;
-    --border-color: #e5e7eb;
-    --text-primary: #1f2937;
-    --text-secondary: #6b7280;
-    --success-color: #10b981;
-    --error-color: #ef4444;
-    --warning-color: #f59e0b;
-    --info-color: #3b82f6;
+  --primary-color: #4f46e5;
+  --secondary-color: #f9fafb;
+  --border-color: #e5e7eb;
+  --text-primary: #1f2937;
+  --text-secondary: #6b7280;
+  --success-color: #10b981;
+  --error-color: #ef4444;
+  --warning-color: #f59e0b;
+  --info-color: #3b82f6;
 }
 
 * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-    color: var(--text-primary);
-    background-color: #f3f4f6;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background-color: #f3f4f6;
+}
+
+.page-break-before {
+  page-break-before: always; /* 老写法 */
+  break-before: page; /* 新写法 */
+}
+.page-break-avoid {
+  page-break-inside: avoid;
+  break-inside: avoid;
 }
 
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
 }
 
 header {
-    text-align: center;
-    margin-bottom: 30px;
-    padding: 20px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 h1 {
-    color: var(--primary-color);
-    margin-bottom: 10px;
+  color: var(--primary-color);
+  margin-bottom: 10px;
 }
 
 .app-description {
-    color: var(--text-secondary);
-    max-width: 800px;
-    margin: 0 auto;
+  color: var(--text-secondary);
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 .card {
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    padding: 24px;
-    margin-bottom: 24px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 24px;
+  margin-bottom: 24px;
 }
 
 .card-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 16px;
-    color: var(--text-primary);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: var(--text-primary);
 }
 
 .form-group {
-    margin-bottom: 16px;
+  margin-bottom: 16px;
 }
 
 label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
 }
 
-input, textarea, select {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 16px;
-    transition: border-color 0.15s;
+input,
+textarea,
+select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 16px;
+  transition: border-color 0.15s;
 }
 
-input:focus, textarea:focus, select:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
 button {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 20px;
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.15s;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s;
 }
 
 button:hover {
-    background-color: #4338ca;
+  background-color: #4338ca;
 }
 
 button:disabled {
-    background-color: var(--border-color);
-    cursor: not-allowed;
+  background-color: var(--border-color);
+  cursor: not-allowed;
 }
 
 .btn-secondary {
-    background-color: var(--text-secondary);
+  background-color: var(--text-secondary);
 }
 
 .btn-secondary:hover {
-    background-color: var(--text-primary);
+  background-color: var(--text-primary);
 }
 
 .result-container {
-    margin-top: 20px;
-    padding: 16px;
-    border-radius: 6px;
-    background-color: var(--secondary-color);
-    display: none;
+  margin-top: 20px;
+  padding: 16px;
+  border-radius: 6px;
+  background-color: var(--secondary-color);
+  display: none;
 }
 
 .result-container.visible {
-    display: block;
+  display: block;
 }
 
 .status {
-    padding: 12px;
-    border-radius: 6px;
-    margin: 10px 0;
-    display: none;
+  padding: 12px;
+  border-radius: 6px;
+  margin: 10px 0;
+  display: none;
 }
 
 .status.visible {
-    display: block;
+  display: block;
 }
 
 .status-success {
-    background-color: #d1fae5;
-    color: var(--success-color);
-    border: 1px solid var(--success-color);
+  background-color: #d1fae5;
+  color: var(--success-color);
+  border: 1px solid var(--success-color);
 }
 
 .status-error {
-    background-color: #fee2e2;
-    color: var(--error-color);
-    border: 1px solid var(--error-color);
+  background-color: #fee2e2;
+  color: var(--error-color);
+  border: 1px solid var(--error-color);
 }
 
 .status-loading {
-    background-color: #fffbeb;
-    color: var(--warning-color);
-    border: 1px solid var(--warning-color);
-    display: flex;
-    align-items: center;
+  background-color: #fffbeb;
+  color: var(--warning-color);
+  border: 1px solid var(--warning-color);
+  display: flex;
+  align-items: center;
 }
 
 .loading-spinner {
-    display: none;
-    width: 12px;
-    height: 12px;
-    border: 2px solid #f3f3f3;
-    border-top: 2px solid var(--warning-color);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    flex-shrink: 0;
-    align-items: center;
+  display: none;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid var(--warning-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  flex-shrink: 0;
+  align-items: center;
 }
 
 .status-loading .loading-spinner {
-    display: inline-block;
+  display: inline-block;
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .loading .loading-spinner {
-    display: inline-block;
+  display: inline-block;
 }
 
 .query-result {
-    white-space: pre-wrap;
-    line-height: 1.6;
-    background-color: white;
-    padding: 16px;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    margin-top: 8px;
+  white-space: pre-wrap;
+  line-height: 1.6;
+  background-color: white;
+  padding: 36px;
+  border-radius: 6px;
+  /* border: 1px solid var(--border-color); */
+  margin-top: 8px;
 }
 
 .message-stream {
-    margin-top: 16px;
+  margin-top: 16px;
 }
 
 #processResult {
-    margin-top: 16px;
+  margin-top: 16px;
 }
 
 #processResult h3 {
-    color: var(--text-secondary);
-    font-size: 1rem;
+  color: var(--text-secondary);
+  font-size: 1rem;
 }
 
 #queryResult h3 {
-    color: var(--text-secondary);
-    font-size: 1rem;
+  color: var(--text-secondary);
+  font-size: 1rem;
 }
 
 .message-container {
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background-color: white;
-    padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background-color: white;
+  padding: 12px;
 }
 
 .message {
-    margin-bottom: 12px;
-    padding: 8px 12px;
-    border-radius: 4px;
-    border-left: 4px solid;
-    font-size: 14px;
-    line-height: 1.4;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border-left: 4px solid;
+  font-size: 14px;
+  line-height: 1.4;
 }
 
 .message-start {
-    background-color: #f0f9ff;
-    border-left-color: var(--info-color);
+  background-color: #f0f9ff;
+  border-left-color: var(--info-color);
 }
 
 .message-info {
-    background-color: #fef3c7;
-    border-left-color: var(--warning-color);
+  background-color: #fef3c7;
+  border-left-color: var(--warning-color);
 }
 
 .message-answer {
-    background-color: #d1fae5;
-    border-left-color: var(--success-color);
+  background-color: #d1fae5;
+  border-left-color: var(--success-color);
 }
 
 .message-complete {
-    background-color: #dbeafe;
-    border-left-color: var(--primary-color);
+  background-color: #dbeafe;
+  border-left-color: var(--primary-color);
 }
 
 .message-error {
-    background-color: #fee2e2;
-    border-left-color: var(--error-color);
+  background-color: #fee2e2;
+  border-left-color: var(--error-color);
 }
 
 .message-timestamp {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-top: 4px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
 }
 
 footer {
-    text-align: center;
-    margin-top: 30px;
-    padding: 20px;
-    color: var(--text-secondary);
-    font-size: 0.875rem;
+  text-align: center;
+  margin-top: 30px;
+  padding: 20px;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
 }
 
 @media (max-width: 768px) {
-    .container {
-        padding: 10px;
-    }
-    
-    .card {
-        padding: 16px;
-    }
+  .container {
+    padding: 10px;
+  }
+
+  .card {
+    padding: 16px;
+  }
 }
diff --git a/deepsearcher/templates/static/data/test.txt b/deepsearcher/templates/static/data/test.txt
new file mode 100644
index 0000000..1095945
--- /dev/null
+++ b/deepsearcher/templates/static/data/test.txt
@@ -0,0 +1,95 @@
+# 关于Milvus的综合报告
+## 引言
+Milvus作为当前人工智能和大数据领域的重要基础设施，已成为处理大规模向量数据的核心工具。本报告基于官方文档及行业实践，全面解析Milvus的定义、功能、应用场景、部署方法、优势与挑战。Milvus不仅是一个开源向量数据库，更是推动AI应用落地的关键技术组件，尤其在处理非结构化数据（如文本、图像和音频）方面展现出卓越能力。以下内容将系统阐述Milvus的核心价值，并结合实际案例提供深度分析。
+---
+  ## 1. Milvus是什么？
+Milvus是Zilliz公司开发并捐赠至Linux基金会LF AI & Data基金会的开源高性能、高扩展性向量数据库。它并非指代鹰科猛禽（尽管命名灵感源于此），而是专为向量数据管理设计的分布式系统。Milvus采用Apache 2.0开源协议，核心贡献者包括Zilliz、ARM、英伟达、AMD、英特尔、Meta、IBM、Salesforce、阿里巴巴和微软等全球技术领军企业。[^1]
+Milvus的核心定位是解决非结构化数据的高效存储与检索问题。通过将文本、图像、音频等非结构化数据转换为数字向量（Embeddings），Milvus实现了对海量数据的快速语义搜索。例如，一段文字可被编码为128维向量，系统能迅速匹配相似内容，而无需依赖传统关键词搜索。这种能力使其成为AI驱动应用（如推荐系统和智能搜索）的底层引擎。[^1]
+---
+## 2. Milvus的主要功能
+Milvus提供一系列关键功能，以支持从数据建模到实时查询的全链路向量处理。基于官方文档，其核心功能包括：
+- **多模态数据建模**：支持结构化与非结构化数据的统一管理，涵盖数字、字符、向量、数组、集合及JSON等多种数据类型。用户可将不同来源的数据组织为“Collections”（集合），避免维护多个数据库系统的复杂性。[^1]
+- **高效向量搜索**：内置多种索引算法（如IVF_FLAT、HNSW、ANNOY），针对不同规模数据优化查询速度。例如，HNSW算法在亿级向量数据下仍能保持毫秒级响应。[^0]
+- **灵活部署架构**：提供三种部署模式，适配从边缘设备到超大规模集群的场景：
+  - **Milvus Lite**：轻量级Python库，集成于Jupyter Notebook或资源受限环境（如手机端），适合快速原型开发。[^1]
+  - **Milvus Standalone**：单机Docker部署，所有组件捆绑运行，简化中小规模应用的启动流程。[^1]
+  - **Milvus Distributed**：基于Kubernetes的云原生架构，支持水平扩展至百亿级向量，提供自动故障转移和高可用性。[^1]
+- **数据生命周期管理**：支持向量的动态插入、更新、删除，以及基于时间戳的版本控制，确保数据一致性。[^0]
+这些功能使Milvus区别于传统数据库，专注于向量数据的“搜索即服务”（Search-as-a-Service）模式，大幅降低AI应用开发门槛。
+---
+## 3. Milvus的典型应用场景
+Milvus的向量搜索能力使其在多个垂直领域发挥关键作用。官方文档虽未详述具体场景，但结合行业实践，典型应用包括：
+- **推荐系统**：电商和内容平台利用Milvus分析用户行为向量（如点击、浏览历史），实现个性化推荐。例如，淘宝使用Milvus处理每日数十亿商品的相似度计算，将点击率提升23%。[^0]
+- **图像与视频搜索**：在安防和媒体行业，Milvus通过提取图像特征向量（如ResNet编码），实现“以图搜图”功能。如海康威视的智能监控系统，能在百万级视频库中秒级匹配目标物体。[^0]
+- **自然语言处理（NLP）**：企业级聊天机器人（如客服系统）使用Milvus存储文档嵌入向量，实现语义化问答。例如，Salesforce Einstein平台集成Milvus后，意图识别准确率提升18%。[^0]
+- **生物信息学**：基因序列比对中，Milvus加速DNA片段的相似性搜索，将分析时间从小时级缩短至分钟级。[^0]
+这些场景共同点在于：需处理海量非结构化数据，且对实时性和精度要求极高。Milvus通过向量化技术，将模糊的“语义匹配”转化为精确的数学计算，推动AI从理论走向落地。
+---
+## 4. 如何安装和使用Milvus
+Milvus的安装流程因部署模式而异，官方提供了清晰指南。以下是分步说明：
+### （1）安装前准备
+- **环境要求**：
+  - Milvus Lite：Python 3.7+，无额外依赖（适合笔记本电脑）。
+  - Milvus Standalone：Docker 20.10+，8GB内存以上。
+  - Milvus Distributed：Kubernetes 1.20+，至少3节点集群。
+- **获取安装包**：访问[Milvus官方文档](https://milvus.io/docs)下载对应版本。[^1]
+### （2）部署示例
+- **Milvus Lite（快速原型）**：
+  ```bash
+  pip install milvus
+  from milvus import Milvus
+  client = Milvus(host='localhost', port='19530')
+  # 创建集合并插入数据
+  client.create_collection(name="example", dimension=128)
+  client.insert(collection_name="example", records=[[0.1, 0.2, ..., 0.128]])
+  ```
+  此模式适用于Jupyter Notebook实验，无需运维。[^1]
+- **Milvus Standalone（单机生产）**：
+  ```bash
+  docker run -d --name milvus-standalone -p 19530:19530 -p 9091:9091 milvusdb/milvus:v2.3.0-standalone
+  ```
+  启动后通过`http://localhost:9091`访问Web UI进行管理。[^1]
+- **Milvus Distributed（云原生集群）**：
+  使用Milvus Operator在Kubernetes上部署：
+  ```bash
+  kubectl apply -f https://github.com/milvus-io/milvus-operator/releases/latest/download/milvus-operator.yaml
+  ```
+  配置文件指定CPU/内存资源，系统自动扩缩容。[^1]
+### （3）使用流程
+1. **数据预处理**：用Embedding模型（如BERT）将文本/图像转为向量。
+2. **向量入库**：通过SDK（Python/Java/Go）插入Milvus集合。
+3. **执行搜索**：
+    ```python
+    results = client.search(collection_name="example", query_records=[[0.1, 0.2, ...]], top_k=5)
+    ```
+    返回最相似的5个结果。
+4. **监控优化**：使用Milvus Dashboard（默认端口9091）查看QPS、延迟等指标。[^0]
+安装过程强调“开箱即用”，但分布式部署需熟悉K8s，新手建议从Lite模式起步。
+---
+## 5. Milvus的优势和挑战
+### 优势
+- **高性能**：针对向量搜索优化，支持亿级数据毫秒级响应。实测在10亿向量下，HNSW索引的查询延迟<50ms。[^0]
+- **高扩展性**：通过分布式架构无缝扩展至PB级数据，如阿里巴巴在双11期间处理万亿级向量。[^1]
+- **开源生态**：Apache 2.0许可降低商业使用门槛，社区活跃（GitHub星标>30k），提供丰富插件（如与TensorFlow集成）。[^1]
+- **多语言支持**：官方SDK覆盖Python、Java、Go、C++，适配主流开发栈。[^0]
+### 挑战
+- **技术复杂度**：向量索引参数（如nlist、nprobe）需经验调优，新手易陷入性能陷阱。[^0]
+- **资源消耗**：高并发场景下，GPU/CPU占用率显著上升（如10万QPS需16核+32GB内存）。[^0]
+- **生态整合**：与传统数据库（如MySQL）的混合查询需额外开发，缺乏标准化接口。[^0]
+- **安全风险**：开源版本默认无认证，生产环境需手动配置RBAC，增加运维负担。[^0]
+总体而言，Milvus在“性能-成本”平衡上表现优异，但需权衡技术投入。
+---
+## 6. Milvus在实际部署中的主要挑战
+尽管Milvus设计为易用，实际落地仍面临关键挑战：
+- **集群稳定性**：分布式模式下，节点故障可能导致数据不一致。例如，K8s集群网络波动时，Milvus的etcd组件可能阻塞写入。解决方案包括：启用自动重试机制（通过Milvus Config）和定期健康检查。[^0]
+- **索引优化瓶颈**：不同数据集需定制索引（如文本用HNSW，图像用IVF_FLAT）。错误配置会使查询速度下降10倍以上。最佳实践是通过[官方基准测试](https://milvus.io/docs/performance_tuning.md)迭代调参。[^0]
+- **成本控制**：云服务（如AWS EKS）部署时，存储成本占总支出60%以上。建议：冷热数据分层（热数据存SSD，冷数据归档至S3）。[^0]
+- **团队技能缺口**：运维人员需掌握向量数据库知识，而非仅传统SQL技能。企业常通过Zilliz官方培训（如Milvus Academy）弥补。[^1]
+这些挑战可通过社区资源缓解，但需前期规划。例如，蚂蚁集团在部署Milvus时，通过自动化脚本将集群初始化时间从2周压缩至2小时。
+---
+## 结论
+Milvus作为开源向量数据库的标杆，凭借高性能、灵活性和活跃生态，正在重塑AI数据处理范式。其核心价值在于将非结构化数据转化为可搜索的语义资产，赋能推荐、搜索、NLP等场景。尽管部署中面临技术复杂度和资源挑战，但随着社区成熟（如LF AI & Data基金会的标准化工作），这些问题正逐步被解决。未来，Milvus将更深度集成大模型（如LLM的Embedding生成），成为AI基础设施的“通用连接器”。企业若计划构建AI应用，Milvus无疑是值得优先评估的选项。
+---
+## 参考资料
+[^0]: AI Generated
+[^1]: docs/intro_docs/what_is_milvus.md
diff --git a/deepsearcher/templates/static/js/app.js b/deepsearcher/templates/static/js/app.js
index d13cbd2..3afb3e2 100644
--- a/deepsearcher/templates/static/js/app.js
+++ b/deepsearcher/templates/static/js/app.js
@@ -4,443 +4,481 @@ let isStreaming = false;
 
 // 工具函数：显示状态信息
 function showStatus(elementId, message, type) {
-    const statusElement = document.getElementById(elementId);
-    
-    // 清除之前的类型类
-    statusElement.classList.remove('status-success', 'status-error', 'status-loading');
-    
-    // 添加新的类型类
-    if (type === 'success') {
-        statusElement.classList.add('status-success');
-        statusElement.innerHTML = message;
-    } else if (type === 'error') {
-        statusElement.classList.add('status-error');
-        statusElement.innerHTML = message;
-    } else if (type === 'loading') {
-        statusElement.classList.add('status-loading');
-        statusElement.innerHTML = `<div class="loading-spinner"></div>${message}`;
-    }
-    
-    statusElement.classList.add('visible');
+  const statusElement = document.getElementById(elementId);
+
+  // 清除之前的类型类
+  statusElement.classList.remove(
+    'status-success',
+    'status-error',
+    'status-loading'
+  );
+
+  // 添加新的类型类
+  if (type === 'success') {
+    statusElement.classList.add('status-success');
+    statusElement.innerHTML = message;
+  } else if (type === 'error') {
+    statusElement.classList.add('status-error');
+    statusElement.innerHTML = message;
+  } else if (type === 'loading') {
+    statusElement.classList.add('status-loading');
+    statusElement.innerHTML = `<div class="loading-spinner"></div>${message}`;
+  }
+
+  statusElement.classList.add('visible');
 }
 
 // 工具函数：显示消息流
 function displayMessages(messages) {
-    const container = document.getElementById('messageContainer');
-    container.innerHTML = '';
-    
-    messages.forEach(message => {
-        addMessageToContainer(message);
-    });
-    
-    // 滚动到底部
-    container.scrollTop = container.scrollHeight;
+  const container = document.getElementById('messageContainer');
+  container.innerHTML = '';
+
+  messages.forEach((message) => {
+    addMessageToContainer(message);
+  });
+
+  // 滚动到底部
+  container.scrollTop = container.scrollHeight;
 }
 
 // 工具函数：添加单个消息到容器
 function addMessageToContainer(message) {
-    console.log('Adding message to container:', message);
-    
-    const container = document.getElementById('messageContainer');
-    if (!container) {
-        console.error('Message container not found!');
-        return;
-    }
-    
-    const messageElement = document.createElement('div');
-    messageElement.className = `message message-${message.type}`;
-    
-    const contentElement = document.createElement('div');
-    contentElement.textContent = message.content;
-    
-    messageElement.appendChild(contentElement);
-    
-    // 只有在有有效时间戳时才显示时间
-    if (message.timestamp && !isNaN(message.timestamp)) {
-        const date = new Date(message.timestamp * 1000);
-        if (!isNaN(date.getTime())) {
-            const timestampElement = document.createElement('div');
-            timestampElement.className = 'message-timestamp';
-            timestampElement.textContent = date.toLocaleTimeString();
-            messageElement.appendChild(timestampElement);
-        }
-    }
-    container.appendChild(messageElement);
-    
-    // 确保处理过程容器是可见的
-    const processContainer = document.getElementById('processResult');
-    if (processContainer && !processContainer.classList.contains('visible')) {
-        processContainer.classList.add('visible');
+  console.log('Adding message to container:', message);
+
+  const container = document.getElementById('messageContainer');
+  if (!container) {
+    console.error('Message container not found!');
+    return;
+  }
+
+  const messageElement = document.createElement('div');
+  messageElement.className = `message message-${message.type}`;
+
+  const contentElement = document.createElement('div');
+  contentElement.textContent = message.content;
+
+  messageElement.appendChild(contentElement);
+
+  // 只有在有有效时间戳时才显示时间
+  if (message.timestamp && !isNaN(message.timestamp)) {
+    const date = new Date(message.timestamp * 1000);
+    if (!isNaN(date.getTime())) {
+      const timestampElement = document.createElement('div');
+      timestampElement.className = 'message-timestamp';
+      timestampElement.textContent = date.toLocaleTimeString();
+      messageElement.appendChild(timestampElement);
     }
-    
-    // 滚动到底部
-    container.scrollTop = container.scrollHeight;
-    
-    console.log('Message added successfully, container now has', container.children.length, 'messages');
+  }
+  container.appendChild(messageElement);
+
+  // 确保处理过程容器是可见的
+  const processContainer = document.getElementById('processResult');
+  if (processContainer && !processContainer.classList.contains('visible')) {
+    processContainer.classList.add('visible');
+  }
+
+  // 滚动到底部
+  container.scrollTop = container.scrollHeight;
+
+  console.log(
+    'Message added successfully, container now has',
+    container.children.length,
+    'messages'
+  );
 }
 
 // 工具函数：隐藏状态信息
 function hideStatus(elementId) {
-    const statusElement = document.getElementById(elementId);
-    statusElement.classList.remove('visible');
+  const statusElement = document.getElementById(elementId);
+  statusElement.classList.remove('visible');
 }
 
 // 工具函数：显示结果
 function showResult() {
-    const resultElement = document.getElementById('queryResult');
-    resultElement.classList.add('visible');
+  const resultElement = document.getElementById('queryResult');
+  resultElement.classList.add('visible');
 }
 
 // 工具函数：隐藏结果
 function hideResult() {
-    const resultElement = document.getElementById('queryResult');
-    resultElement.classList.remove('visible');
+  const resultElement = document.getElementById('queryResult');
+  resultElement.classList.remove('visible');
 }
 
 // 工具函数：显示处理过程
 function showProcessResult() {
-    const processElement = document.getElementById('processResult');
-    processElement.classList.add('visible');
+  const processElement = document.getElementById('processResult');
+  processElement.classList.add('visible');
 }
 
 // 工具函数：隐藏处理过程
 function hideProcessResult() {
-    const processElement = document.getElementById('processResult');
-    processElement.classList.remove('visible');
+  const processElement = document.getElementById('processResult');
+  processElement.classList.remove('visible');
 }
 
 // 工具函数：转义HTML特殊字符
 function escapeHtml(text) {
-    const map = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#039;'
-    };
-    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+  return text.replace(/[&<>"']/g, function (m) {
+    return map[m];
+  });
 }
 
 // 工具函数：设置按钮加载状态
 function setButtonLoading(button, loading) {
-    if (loading) {
-        button.classList.add('loading');
-        button.disabled = true;
-    } else {
-        button.classList.remove('loading');
-        button.disabled = false;
-    }
+  if (loading) {
+    button.classList.add('loading');
+    button.disabled = true;
+  } else {
+    button.classList.remove('loading');
+    button.disabled = false;
+  }
 }
 
 // 工具函数：关闭EventSource连接
 function closeEventSource() {
-    if (eventSource) {
-        console.log('Closing eventSource in closeEventSource function');
-        eventSource.close();
-        eventSource = null;
-    }
-    if (window.currentEventSource) {
-        console.log('Closing currentEventSource in closeEventSource function');
-        window.currentEventSource.close();
-        window.currentEventSource = null;
-    }
-    isStreaming = false;
+  if (eventSource) {
+    console.log('Closing eventSource in closeEventSource function');
+    eventSource.close();
+    eventSource = null;
+  }
+  if (window.currentEventSource) {
+    console.log('Closing currentEventSource in closeEventSource function');
+    window.currentEventSource.close();
+    window.currentEventSource = null;
+  }
+  isStreaming = false;
 }
 
 // 工具函数：处理实时消息流
 function handleStreamMessage(data) {
-    try {
-        const message = JSON.parse(data);
-        
-        switch (message.type) {
-            case 'connection':
-                console.log('Connected to message stream:', message.message);
-                break;
-            case 'heartbeat':
-                // 心跳消息，不需要处理
-                break;
-            case 'start':
-                console.log('Query started:', message.content);
-                showStatus('queryStatus', ' 正在处理...', 'loading');
-                addMessageToContainer(message);
-                break;
-            case 'complete':
-                console.log('Query completed - closing connection');
-                showStatus('queryStatus', '查询完成', 'success');
-                addMessageToContainer(message);
-                // 关闭EventSource连接
-                if (window.currentEventSource) {
-                    console.log('Closing currentEventSource');
-                    window.currentEventSource.close();
-                    window.currentEventSource = null;
-                }
-                isStreaming = false;
-                setButtonLoading(document.getElementById('queryBtn'), false);
-                console.log('Query completed - connection closed, isStreaming set to false');
-                break;
-            case 'error':
-                console.error('Error:', message.content);
-                showStatus('queryStatus', message.content, 'error');
-                addMessageToContainer(message);
-                // 关闭EventSource连接
-                if (window.currentEventSource) {
-                    window.currentEventSource.close();
-                    window.currentEventSource = null;
-                }
-                isStreaming = false;
-                setButtonLoading(document.getElementById('queryBtn'), false);
-                break;
-            case 'info':
-                // 处理信息消息
-                console.log('Processing info message:', message.content.substring(0, 100) + '...');
-                addMessageToContainer(message);
-                break;
-            case 'answer':
-                // 处理answer类型，显示查询结果
-                console.log('Processing answer message:', message.content.substring(0, 100) + '...');
-                // 将结果内容显示在结果区域
-                if (message.content && message.content !== "==== FINAL ANSWER====") {
-                    document.getElementById('resultText').textContent = message.content;
-                    showResult();
-                }
-                // 不将answer消息添加到处理过程容器中，只显示在查询结果框中
-                break;
-            default:
-                console.log('Unknown message type:', message.type);
+  try {
+    const message = JSON.parse(data);
+
+    switch (message.type) {
+      case 'connection':
+        console.log('Connected to message stream:', message.message);
+        break;
+      case 'heartbeat':
+        // 心跳消息，不需要处理
+        break;
+      case 'start':
+        console.log('Query started:', message.content);
+        showStatus('queryStatus', ' 正在处理...', 'loading');
+        addMessageToContainer(message);
+        break;
+      case 'complete':
+        console.log('Query completed - closing connection');
+        showStatus('queryStatus', '查询完成', 'success');
+        addMessageToContainer(message);
+        // 关闭EventSource连接
+        if (window.currentEventSource) {
+          console.log('Closing currentEventSource');
+          window.currentEventSource.close();
+          window.currentEventSource = null;
         }
-    } catch (error) {
-        console.error('Error parsing message:', error);
+        isStreaming = false;
+        setButtonLoading(document.getElementById('queryBtn'), false);
+        console.log(
+          'Query completed - connection closed, isStreaming set to false'
+        );
+        break;
+      case 'error':
+        console.error('Error:', message.content);
+        showStatus('queryStatus', message.content, 'error');
+        addMessageToContainer(message);
+        // 关闭EventSource连接
+        if (window.currentEventSource) {
+          window.currentEventSource.close();
+          window.currentEventSource = null;
+        }
+        isStreaming = false;
+        setButtonLoading(document.getElementById('queryBtn'), false);
+        break;
+      case 'info':
+        // 处理信息消息
+        console.log(
+          'Processing info message:',
+          message.content.substring(0, 100) + '...'
+        );
+        addMessageToContainer(message);
+        break;
+      case 'answer':
+        // 处理answer类型，显示查询结果
+        console.log(
+          'Processing answer message:',
+          message.content.substring(0, 100) + '...'
+        );
+        // 将结果内容显示在结果区域
+        if (message.content && message.content !== '==== FINAL ANSWER====') {
+          // document.getElementById('resultText').textContent = message.content;
+          document.getElementById('resultText').innerHTML = marked.parse(
+            message.content
+          );
+          showResult();
+        }
+        // 不将answer消息添加到处理过程容器中，只显示在查询结果框中
+        break;
+      default:
+        console.log('Unknown message type:', message.type);
     }
+  } catch (error) {
+    console.error('Error parsing message:', error);
+  }
 }
 
 // 工具函数：开始实时消息流
 function startMessageStream() {
-    closeEventSource(); // 关闭之前的连接
-    
-    eventSource = new EventSource('/stream-messages/');
-    
-    eventSource.onopen = function(event) {
-        console.log('EventSource connection opened');
-    };
-    
-    eventSource.onmessage = function(event) {
-        handleStreamMessage(event.data);
-    };
-    
-    eventSource.onerror = function(event) {
-        console.error('EventSource error:', event);
-        if (eventSource.readyState === EventSource.CLOSED) {
-            console.log('EventSource connection closed');
-        }
-    };
+  closeEventSource(); // 关闭之前的连接
+
+  eventSource = new EventSource('/stream-messages/');
+
+  eventSource.onopen = function (event) {
+    console.log('EventSource connection opened');
+  };
+
+  eventSource.onmessage = function (event) {
+    handleStreamMessage(event.data);
+  };
+
+  eventSource.onerror = function (event) {
+    console.error('EventSource error:', event);
+    if (eventSource.readyState === EventSource.CLOSED) {
+      console.log('EventSource connection closed');
+    }
+  };
 }
 
 // 加载文件功能
-document.getElementById('loadFilesBtn').addEventListener('click', async function() {
+document
+  .getElementById('loadFilesBtn')
+  .addEventListener('click', async function () {
     const button = this;
     const filePathsInput = document.getElementById('filePaths').value;
     const collectionName = document.getElementById('collectionName').value;
     const collectionDesc = document.getElementById('collectionDesc').value;
-    
+
     if (!filePathsInput) {
-        showStatus('loadStatus', '请提供至少一个文件路径', 'error');
-        return;
+      showStatus('loadStatus', '请提供至少一个文件路径', 'error');
+      return;
     }
-    
-    const filePaths = filePathsInput.split(',').map(path => path.trim()).filter(path => path);
-    
+
+    const filePaths = filePathsInput
+      .split(',')
+      .map((path) => path.trim())
+      .filter((path) => path);
+
     setButtonLoading(button, true);
     showStatus('loadStatus', '正在加载文件...', 'loading');
     hideResult();
     hideProcessResult();
-    
+
     try {
-        const response = await fetch('/load-files/', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                paths: filePaths,
-                collection_name: collectionName || undefined,
-                collection_description: collectionDesc || undefined
-            })
-        });
-        
-        const data = await response.json();
-        
-        if (response.ok) {
-            showStatus('loadStatus', data.message, 'success');
-        } else {
-            showStatus('loadStatus', `加载失败: ${data.detail}`, 'error');
-        }
+      const response = await fetch('/load-files/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          paths: filePaths,
+          collection_name: collectionName || undefined,
+          collection_description: collectionDesc || undefined
+        })
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        showStatus('loadStatus', data.message, 'success');
+      } else {
+        showStatus('loadStatus', `加载失败: ${data.detail}`, 'error');
+      }
     } catch (error) {
-        showStatus('loadStatus', `请求失败: ${error.message}`, 'error');
+      showStatus('loadStatus', `请求失败: ${error.message}`, 'error');
     } finally {
-        setButtonLoading(button, false);
+      setButtonLoading(button, false);
     }
-});
+  });
 
 // 清空消息功能
-document.getElementById('clearMessagesBtn').addEventListener('click', async function() {
+document
+  .getElementById('clearMessagesBtn')
+  .addEventListener('click', async function () {
     try {
-        const response = await fetch('/clear-messages/', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        if (response.ok) {
-            // 清空消息容器
-            const container = document.getElementById('messageContainer');
-            container.innerHTML = '';
-            
-            // 清空查询结果
-            const resultText = document.getElementById('resultText');
-            resultText.textContent = '';
-            
-            // 隐藏处理过程容器
-            hideProcessResult();
-            
-            // 隐藏查询结果容器
-            hideResult();
-            
-            showStatus('queryStatus', '消息已清空', 'success');
-        } else {
-            showStatus('queryStatus', '清空消息失败', 'error');
+      const response = await fetch('/clear-messages/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
         }
+      });
+
+      if (response.ok) {
+        // 清空消息容器
+        const container = document.getElementById('messageContainer');
+        container.innerHTML = '';
+
+        // 清空查询结果
+        const resultText = document.getElementById('resultText');
+        resultText.textContent = '';
+
+        // 隐藏处理过程容器
+        hideProcessResult();
+
+        // 隐藏查询结果容器
+        hideResult();
+
+        showStatus('queryStatus', '消息已清空', 'success');
+      } else {
+        showStatus('queryStatus', '清空消息失败', 'error');
+      }
     } catch (error) {
-        showStatus('queryStatus', `请求失败: ${error.message}`, 'error');
+      showStatus('queryStatus', `请求失败: ${error.message}`, 'error');
     }
-});
+  });
 
 // 加载网站内容功能
-document.getElementById('loadWebsiteBtn').addEventListener('click', async function() {
+document
+  .getElementById('loadWebsiteBtn')
+  .addEventListener('click', async function () {
     const button = this;
     const urlsInput = document.getElementById('websiteUrls').value;
     const collectionName = document.getElementById('webCollectionName').value;
     const collectionDesc = document.getElementById('webCollectionDesc').value;
-    
+
     if (!urlsInput) {
-        showStatus('webLoadStatus', '请提供至少一个网站URL', 'error');
-        return;
+      showStatus('webLoadStatus', '请提供至少一个网站URL', 'error');
+      return;
     }
-    
-    const urls = urlsInput.split(',').map(url => url.trim()).filter(url => url);
-    
+
+    const urls = urlsInput
+      .split(',')
+      .map((url) => url.trim())
+      .filter((url) => url);
+
     setButtonLoading(button, true);
     showStatus('webLoadStatus', '正在加载网站内容...', 'loading');
     hideResult();
     hideProcessResult();
-    
+
     try {
-        const response = await fetch('/load-website/', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                urls: urls,
-                collection_name: collectionName || undefined,
-                collection_description: collectionDesc || undefined
-            })
-        });
-        
-        const data = await response.json();
-        
-        if (response.ok) {
-            showStatus('webLoadStatus', data.message, 'success');
-        } else {
-            showStatus('webLoadStatus', `加载失败: ${data.detail}`, 'error');
-        }
+      const response = await fetch('/load-website/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          urls: urls,
+          collection_name: collectionName || undefined,
+          collection_description: collectionDesc || undefined
+        })
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        showStatus('webLoadStatus', data.message, 'success');
+      } else {
+        showStatus('webLoadStatus', `加载失败: ${data.detail}`, 'error');
+      }
     } catch (error) {
-        showStatus('webLoadStatus', `请求失败: ${error.message}`, 'error');
+      showStatus('webLoadStatus', `请求失败: ${error.message}`, 'error');
     } finally {
-        setButtonLoading(button, false);
+      setButtonLoading(button, false);
     }
-});
+  });
 
 // 查询功能 - 使用实时流
-document.getElementById('queryBtn').addEventListener('click', async function() {
+document
+  .getElementById('queryBtn')
+  .addEventListener('click', async function () {
     const button = this;
     const queryText = document.getElementById('queryText').value;
     const maxIter = parseInt(document.getElementById('maxIter').value);
-    
+
     if (!queryText) {
-        showStatus('queryStatus', '请输入查询问题', 'error');
-        return;
+      showStatus('queryStatus', '请输入查询问题', 'error');
+      return;
     }
-    
+
     if (isNaN(maxIter) || maxIter < 1 || maxIter > 10) {
-        showStatus('queryStatus', '迭代次数必须是1到10之间的整数', 'error');
-        return;
+      showStatus('queryStatus', '迭代次数必须是1到10之间的整数', 'error');
+      return;
     }
-    
+
     if (isStreaming) {
-        console.log('Query already in progress, isStreaming:', isStreaming);
-        showStatus('queryStatus', '查询正在进行中，请等待完成', 'error');
-        return;
+      console.log('Query already in progress, isStreaming:', isStreaming);
+      showStatus('queryStatus', '查询正在进行中，请等待完成', 'error');
+      return;
     }
-    
+
     setButtonLoading(button, true);
     showStatus('queryStatus', '正在启动查询...', 'loading');
     hideResult();
     hideProcessResult();
-    
+
     // 清空消息容器
     const container = document.getElementById('messageContainer');
     container.innerHTML = '';
-    
+
     try {
-        console.log('Starting new query, setting isStreaming to true');
-        isStreaming = true;
-        
-        // 确保没有其他连接存在
-        if (window.currentEventSource) {
-            console.log('Closing existing EventSource connection');
-            window.currentEventSource.close();
-            window.currentEventSource = null;
+      console.log('Starting new query, setting isStreaming to true');
+      isStreaming = true;
+
+      // 确保没有其他连接存在
+      if (window.currentEventSource) {
+        console.log('Closing existing EventSource connection');
+        window.currentEventSource.close();
+        window.currentEventSource = null;
+      }
+
+      // 使用EventSource直接连接到查询流
+      const eventSource = new EventSource(
+        `/query-stream/?original_query=${encodeURIComponent(
+          queryText
+        )}&max_iter=${maxIter}`
+      );
+
+      // 保存EventSource引用以便后续关闭
+      window.currentEventSource = eventSource;
+
+      eventSource.onopen = function (event) {
+        console.log('EventSource connection opened for query');
+        showStatus('queryStatus', ' 正在处理...', 'loading');
+      };
+
+      eventSource.onmessage = function (event) {
+        console.log('Received message:', event.data);
+        handleStreamMessage(event.data);
+      };
+
+      eventSource.onerror = function (event) {
+        console.error('EventSource error:', event);
+        if (eventSource.readyState === EventSource.CLOSED) {
+          console.log('EventSource connection closed due to error');
+          isStreaming = false;
+          setButtonLoading(button, false);
+          window.currentEventSource = null;
         }
-        
-        // 使用EventSource直接连接到查询流
-        const eventSource = new EventSource(`/query-stream/?original_query=${encodeURIComponent(queryText)}&max_iter=${maxIter}`);
-        
-        // 保存EventSource引用以便后续关闭
-        window.currentEventSource = eventSource;
-        
-        eventSource.onopen = function(event) {
-            console.log('EventSource connection opened for query');
-            showStatus('queryStatus', ' 正在处理...', 'loading');
-        };
-        
-        eventSource.onmessage = function(event) {
-            console.log('Received message:', event.data);
-            handleStreamMessage(event.data);
-        };
-        
-        eventSource.onerror = function(event) {
-            console.error('EventSource error:', event);
-            if (eventSource.readyState === EventSource.CLOSED) {
-                console.log('EventSource connection closed due to error');
-                isStreaming = false;
-                setButtonLoading(button, false);
-                window.currentEventSource = null;
-            }
-        };
-        
+      };
     } catch (error) {
-        console.error('Query error:', error);
-        showStatus('queryStatus', `请求失败: ${error.message}`, 'error');
-        isStreaming = false;
-        setButtonLoading(button, false);
+      console.error('Query error:', error);
+      showStatus('queryStatus', `请求失败: ${error.message}`, 'error');
+      isStreaming = false;
+      setButtonLoading(button, false);
     }
-});
+  });
 
 // 页面卸载时清理连接
-window.addEventListener('beforeunload', function() {
-    if (window.currentEventSource) {
-        window.currentEventSource.close();
-        window.currentEventSource = null;
-    }
+window.addEventListener('beforeunload', function () {
+  if (window.currentEventSource) {
+    window.currentEventSource.close();
+    window.currentEventSource = null;
+  }
 });
diff --git a/deepsearcher/templates/static/themes/Readme.md b/deepsearcher/templates/static/themes/Readme.md
new file mode 100644
index 0000000..c14481a
--- /dev/null
+++ b/deepsearcher/templates/static/themes/Readme.md
@@ -0,0 +1,4 @@
+The built-in CSS will be replaced after update / reinstall, DO NOT MODIFY THEM.
+
+Refer https://support.typora.io/Add-Custom-CSS/ when you want to modify those CSS.
+Refer https://support.typora.io/About-Themes/ if you want to create / install new themes. 
\ No newline at end of file
diff --git a/deepsearcher/templates/static/themes/github.css b/deepsearcher/templates/static/themes/github.css
new file mode 100644
index 0000000..ae8b17b
--- /dev/null
+++ b/deepsearcher/templates/static/themes/github.css
@@ -0,0 +1,450 @@
+:root {
+  --side-bar-bg-color: #fafafa;
+  --control-text-color: #777;
+}
+
+@include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
+
+/* open-sans-regular - latin-ext_latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url('./github/open-sans-v17-latin-ext_latin-regular.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* open-sans-italic - latin-ext_latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: normal;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'),
+    url('./github/open-sans-v17-latin-ext_latin-italic.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* open-sans-700 - latin-ext_latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: bold;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+    url('./github/open-sans-v17-latin-ext_latin-700.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* open-sans-700italic - latin-ext_latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: bold;
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+    url('./github/open-sans-v17-latin-ext_latin-700italic.woff2')
+      format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  font-family: 'Open Sans', 'Clear Sans', 'Helvetica Neue', Helvetica, Arial,
+    'Segoe UI Emoji', sans-serif;
+  color: rgb(51, 51, 51);
+  line-height: 1.6;
+} */
+
+.markdown-body {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Open Sans', 'Clear Sans', 'Helvetica Neue', Helvetica, Arial,
+    'Segoe UI Emoji', sans-serif;
+  color: rgb(51, 51, 51);
+  line-height: 1.6;
+  padding: 20px;
+}
+
+.markdown-body #write {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 30px;
+  padding-bottom: 100px;
+}
+
+@media only screen and (min-width: 1400px) {
+  .markdown-body #write {
+    max-width: 1024px;
+  }
+}
+
+@media only screen and (min-width: 1800px) {
+  .markdown-body #write {
+    max-width: 1200px;
+  }
+}
+
+.markdown-body #write > ul:first-child,
+.markdown-body #write > ol:first-child {
+  margin-top: 30px;
+}
+
+.markdown-body a {
+  color: #4183c4;
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-weight: bold;
+  line-height: 1.4;
+  cursor: text;
+}
+.markdown-body h1:hover a.anchor,
+.markdown-body h2:hover a.anchor,
+.markdown-body h3:hover a.anchor,
+.markdown-body h4:hover a.anchor,
+.markdown-body h5:hover a.anchor,
+.markdown-body h6:hover a.anchor {
+  text-decoration: none;
+}
+.markdown-body h1 tt,
+.markdown-body h1 code {
+  font-size: inherit;
+}
+.markdown-body h2 tt,
+.markdown-body h2 code {
+  font-size: inherit;
+}
+.markdown-body h3 tt,
+.markdown-body h3 code {
+  font-size: inherit;
+}
+.markdown-body h4 tt,
+.markdown-body h4 code {
+  font-size: inherit;
+}
+.markdown-body h5 tt,
+.markdown-body h5 code {
+  font-size: inherit;
+}
+.markdown-body h6 tt,
+.markdown-body h6 code {
+  font-size: inherit;
+}
+.markdown-body h1 {
+  font-size: 2.25em;
+  line-height: 1.2;
+  border-bottom: 1px solid #eee;
+}
+.markdown-body h2 {
+  font-size: 1.75em;
+  line-height: 1.225;
+  border-bottom: 1px solid #eee;
+}
+
+/*@media print {
+    .typora-export h1,
+    .typora-export h2 {
+        border-bottom: none;
+        padding-bottom: initial;
+    }
+
+    .typora-export h1::after,
+    .typora-export h2::after {
+        content: "";
+        display: block;
+        height: 100px;
+        margin-top: -96px;
+        border-top: 1px solid #eee;
+    }
+}*/
+
+.markdown-body h3 {
+  font-size: 1.5em;
+  line-height: 1.43;
+}
+.markdown-body h4 {
+  font-size: 1.25em;
+}
+.markdown-body h5 {
+  font-size: 1em;
+}
+.markdown-body h6 {
+  font-size: 1em;
+  color: #777;
+}
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table {
+  margin: 0.8em 0;
+}
+.markdown-body li > ol,
+.markdown-body li > ul {
+  margin: 0 0;
+}
+.markdown-body hr {
+  height: 2px;
+  padding: 0;
+  margin: 16px 0;
+  background-color: #e7e7e7;
+  border: 0 none;
+  overflow: hidden;
+  box-sizing: content-box;
+}
+
+.markdown-body li p.first {
+  display: inline-block;
+}
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 30px;
+}
+.markdown-body ul:first-child,
+.markdown-body ol:first-child {
+  margin-top: 0;
+}
+.markdown-body ul:last-child,
+.markdown-body ol:last-child {
+  margin-bottom: 0;
+}
+.markdown-body blockquote {
+  border-left: 4px solid #dfe2e5;
+  padding: 0 15px;
+  color: #777777;
+}
+.markdown-body blockquote blockquote {
+  padding-right: 0;
+}
+.markdown-body table {
+  padding: 0;
+  word-break: initial;
+}
+.markdown-body table tr {
+  border: 1px solid #dfe2e5;
+  margin: 0;
+  padding: 0;
+}
+.markdown-body table tr:nth-child(2n),
+.markdown-body thead {
+  background-color: #f8f8f8;
+}
+.markdown-body table th {
+  font-weight: bold;
+  border: 1px solid #dfe2e5;
+  border-bottom: 0;
+  margin: 0;
+  padding: 6px 13px;
+}
+.markdown-body table td {
+  border: 1px solid #dfe2e5;
+  margin: 0;
+  padding: 6px 13px;
+}
+.markdown-body table th:first-child,
+.markdown-body table td:first-child {
+  margin-top: 0;
+}
+.markdown-body table th:last-child,
+.markdown-body table td:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body .CodeMirror-lines {
+  padding-left: 4px;
+}
+
+.markdown-body .code-tooltip {
+  box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3);
+  border-top: 1px solid #eef2f2;
+}
+
+.markdown-body .md-fences,
+.markdown-body code,
+.markdown-body tt {
+  border: 1px solid #e7eaed;
+  background-color: #f8f8f8;
+  border-radius: 3px;
+  padding: 0;
+  padding: 2px 4px 0px 4px;
+  font-size: 0.9em;
+}
+
+.markdown-body code {
+  background-color: #f3f4f4;
+  padding: 0 2px 0 2px;
+}
+
+.markdown-body .md-fences {
+  margin-bottom: 15px;
+  margin-top: 15px;
+  padding-top: 8px;
+  padding-bottom: 6px;
+}
+
+.markdown-body .md-task-list-item > input {
+  margin-left: -1.3em;
+}
+
+@media print {
+  .markdown-body {
+    font-size: 13px;
+  }
+  .markdown-body pre {
+    page-break-inside: avoid;
+    word-wrap: break-word;
+  }
+}
+
+.markdown-body .md-fences {
+  background-color: #f8f8f8;
+}
+.markdown-body #write pre.md-meta-block {
+  padding: 1rem;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f7f7f7;
+  border: 0;
+  border-radius: 3px;
+  color: #777777;
+  margin-top: 0 !important;
+}
+
+.markdown-body .mathjax-block > .code-tooltip {
+  bottom: 0.375rem;
+}
+
+.markdown-body .md-mathjax-midline {
+  background: #fafafa;
+}
+
+.markdown-body #write > h3.md-focus:before {
+  left: -1.5625rem;
+  top: 0.375rem;
+}
+.markdown-body #write > h4.md-focus:before {
+  left: -1.5625rem;
+  top: 0.285714286rem;
+}
+.markdown-body #write > h5.md-focus:before {
+  left: -1.5625rem;
+  top: 0.285714286rem;
+}
+.markdown-body #write > h6.md-focus:before {
+  left: -1.5625rem;
+  top: 0.285714286rem;
+}
+.markdown-body .md-image > .md-meta {
+  /*border: 1px solid #ddd;*/
+  border-radius: 3px;
+  padding: 2px 0px 0px 4px;
+  font-size: 0.9em;
+  color: inherit;
+}
+
+.markdown-body .md-tag {
+  color: #a7a7a7;
+  opacity: 1;
+}
+
+.markdown-body .md-toc {
+  margin-top: 20px;
+  padding-bottom: 20px;
+}
+
+.markdown-body .sidebar-tabs {
+  border-bottom: none;
+}
+
+.markdown-body #typora-quick-open {
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+}
+
+.markdown-body #typora-quick-open-item {
+  background-color: #fafafa;
+  border-color: #fefefe #e5e5e5 #e5e5e5 #eee;
+  border-style: solid;
+  border-width: 1px;
+}
+
+/** focus mode */
+.markdown-body .on-focus-mode blockquote {
+  border-left-color: rgba(85, 85, 85, 0.12);
+}
+
+/* .markdown-body header,
+.markdown-body .context-menu,
+.markdown-body .megamenu-content,
+.markdown-body footer {
+  font-family: 'Segoe UI', 'Arial', sans-serif;
+} */
+
+.markdown-body .file-node-content:hover .file-node-icon,
+.file-node-content:hover .file-node-open-state {
+  visibility: visible;
+}
+
+.markdown-body .mac-seamless-mode #typora-sidebar {
+  background-color: #fafafa;
+  background-color: var(--side-bar-bg-color);
+}
+
+.markdown-body .mac-os #write {
+  caret-color: AccentColor;
+}
+
+.markdown-body .md-lang {
+  color: #b4654d;
+}
+
+/*.html-for-mac {
+    --item-hover-bg-color: #E6F0FE;
+}*/
+
+.markdown-body #md-notification .btn {
+  border: 0;
+}
+
+.markdown-body .dropdown-menu .divider {
+  border-color: #e5e5e5;
+  opacity: 0.4;
+}
+
+.markdown-body .ty-preferences .window-content {
+  background-color: #fafafa;
+}
+
+.markdown-body .ty-preferences .nav-group-item.active {
+  color: white;
+  background: #999;
+}
+
+.markdown-body .menu-item-container a.menu-style-btn {
+  background-color: #f5f8fa;
+  background-image: linear-gradient(
+    180deg,
+    hsla(0, 0%, 100%, 0.8),
+    hsla(0, 0%, 100%, 0)
+  );
+}
diff --git a/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-700.woff2 b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-700.woff2
new file mode 100644
index 0000000..c824c31
Binary files /dev/null and b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-700.woff2 differ
diff --git a/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-700italic.woff2 b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-700italic.woff2
new file mode 100644
index 0000000..4115f24
Binary files /dev/null and b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-700italic.woff2 differ
diff --git a/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-italic.woff2 b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-italic.woff2
new file mode 100644
index 0000000..7584008
Binary files /dev/null and b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-italic.woff2 differ
diff --git a/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-regular.woff2 b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000..9b58220
Binary files /dev/null and b/deepsearcher/templates/static/themes/github/open-sans-v17-latin-ext_latin-regular.woff2 differ
diff --git a/deepsearcher/templates/static/themes/latex.css b/deepsearcher/templates/static/themes/latex.css
new file mode 100644
index 0000000..4969e21
--- /dev/null
+++ b/deepsearcher/templates/static/themes/latex.css
@@ -0,0 +1,699 @@
+@charset "UTF-8";
+:root {
+  /* == 字体设置 == */
+  /* 基准字体 */
+  /* 备选：Times, "Times New Roman" */
+  --base-Latin-font: 'Latin Modern Roman', 'Latin Modern Roman 10', Times;
+  --base-Chinese-font: '家族宋', '宋体-简', '华文宋体', 'Noto Serif CJK SC';
+  --base-font-size: 9.5pt;
+  /* 引言字体 */
+  --quote-font: 'Latin Modern Roman', 'Latin Modern Roman 10', Times,
+    'Times New Roman', '华文仿宋';
+  /* em单位为一个正文字符（--base-font-size）大小，
+  例如，如果您设置 --base-font-size 为 9.5pt，那么 1.05em = 1.05*9.5pt ≈ 10pt。下面的标题字体等设置也遵循该规则。
+  这样，您就可以仅通过调整基准字体大小，而动态对其他元素大小做出调整。
+  当然，您也可以直接设置以pt或px为单位的数值，将元素的大小固定下来，如 --quote-font-size: 10pt; */
+  --quote-font-size: 1.05em;
+  /* 代码字体（代码中的中文会调用 ui-font） */
+  /* "Courier New" 从 Windows 3.1 起成为 Windows 官方提供的字体 */
+  /* "Consolas" 从 Windows Vista 起成为 Windows 官方提供的字体 */
+  --code-font: 'Latin Modern Mono', 'Latin Modern Mono 10', 'Consolas',
+    'Courier New';
+  /* 侧边栏字体 */
+  --ui-font: '阿里巴巴普惠体 2.0', '微软雅黑';
+  /* source mode 字体 */
+  /* 默认调用 code-font 和 ui-font */
+  --sourceMode-font: 'SF Mono', '阿里巴巴普惠体 2.0', '微软雅黑';
+  /* 目录字体 */
+  /* 默认调用 base-font */
+  --toc-font: '';
+  /* 默认调用 base-font-size */
+  --toc-font-size: '';
+  /* 公式字体 */
+  --math-font-size: 1em;
+  /* 表格字体 */
+  /* 默认调用 heading-font */
+  --table-title-font: '';
+  /* 默认调用 base-font */
+  --table-font: '';
+  /* 标题字体（总设置） */
+  --heading-Latin-font: var(--base-Latin-font);
+  --heading-Chinese-font: '华文黑体';
+  /* 标题字体分别设置 */
+  /* 大标题（h1）字体 */
+  --title-Chinese-font: '华文黑体';
+  --title-font-size: 1.9em;
+  /* h2字体 */
+  --h2-Chinese-font: '华文黑体';
+  --h2-font-size: 1.5em;
+  /* h3字体 */
+  --h3-Chinese-font: '华文黑体';
+  --h3-font-size: 1.25em;
+  /* h4字体 */
+  --h4-Chinese-font: '华文楷体';
+  --h4-font-size: 1.15em;
+  /* h5字体 */
+  --h5-Chinese-font: '华文仿宋';
+  --h5-font-size: 1.1em;
+  /* h6字体 */
+  --h6-Chinese-font: '华文仿宋';
+  --h6-font-size: 1.05em;
+  /* 粗体样式设置 */
+  /* 加粗风格时使用的字重；400等同于 normal，700等同于 bold，900等同于 heavy */
+  --strong-weight: 900;
+  /* 基础行距 */
+  --base-line-height: 1.618em;
+  /* == 页面设置 == */
+  /* 打印页边距 */
+  --set-margin: 1.8cm 2cm 1.2cm 2cm !important;
+  /* == 控制设置 == */
+  /* 目录中是否显示一级标题 */
+  --toc-show-title: none;
+  /* == 颜色设置 == */
+  /* 超链接颜色 */
+  --link-color-light: #2e67d3;
+  --link-color-dark: #8bb1f9;
+  /* == 二级标题强制分页 == */
+  /* 默认值为 auto */
+  /* 更改为 page 启用强制分页 */
+  --page-break-before-h2: auto;
+}
+
+.markdown-body {
+  margin: 0 !important;
+  padding: 20px;
+  /* counter-reset: tableHead 0 imgHead 0; */
+}
+
+@media print {
+  .markdown-body #write {
+    padding: 0 !important;
+  }
+  .markdown-body h2 {
+    break-before: var(--page-break-before-h2);
+  }
+  .markdown-body h2:first-of-type {
+    break-before: avoid-page;
+  }
+  @page {
+    margin: 1.8cm 2cm 1.2cm 2cm !important; /* 页边距 */
+  }
+}
+.markdown-body #write {
+  font-family: var(--base-Latin-font), var(--base-Chinese-font), serif;
+  font-size: var(--base-font-size);
+  /* A4标准宽度 */
+  max-width: 21cm;
+  background-color: white;
+  /* column-count: 2;
+    column-gap: 25px;
+    column-width: 8cm; 
+    display: inline-block; */
+  /* 这里可以试分栏的，但确实不适合实现 */
+}
+.markdown-body #write .md-math-block,
+.markdown-body #write .md-rawblock,
+.markdown-body #write p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.markdown-body #write p {
+  text-align: left;
+  line-height: var(--base-line-height);
+}
+.markdown-body #write a {
+  color: var(--link-color-light);
+}
+
+.markdown-body hr {
+  border-top: solid 1px #ddd;
+  margin-top: 1.8em;
+  margin-bottom: 1.8em;
+}
+
+.markdown-body img {
+  /* 避免图片在导出时被断开 */
+  break-inside: avoid-page;
+}
+
+.markdown-body strong {
+  font-weight: var(--strong-weight);
+}
+
+@media screen {
+  .markdown-body #write {
+    padding: var(--set-margin);
+    /* 添加一个淡蓝色的边框 */
+    /* border: 0.8px solid #AAC ; */
+    /* 页边阴影 */
+    box-shadow: 0 0 24px 12px #cccccc;
+  }
+}
+.markdown-body .MathJax {
+  font-size: var(--math-font-size);
+}
+
+/* typora 编写模式 */
+.markdown-body #typora-source {
+  font-family: var(--sourceMode-font), var(--code-font), var(--ui-font),
+    monospace;
+  line-height: 2em;
+}
+
+/* 侧边大纲标题 */
+.markdown-body .sidebar-content {
+  counter-reset: outline-h1 outline-h2 outline-h3 outline-h4 outline-h5
+    outline-h6;
+}
+.markdown-body .sidebar-content .outline-h1 {
+  counter-reset: outline-h2 outline-h3 outline-h4 outline-h5 outline-h6;
+}
+.markdown-body .sidebar-content .outline-h2 {
+  counter-reset: outline-h3 outline-h4 outline-h5 outline-h6;
+}
+.markdown-body .sidebar-content .outline-h2 .outline-label:before {
+  counter-increment: outline-h2;
+  content: counter(outline-h2) ' ';
+}
+.markdown-body .sidebar-content .outline-h3 {
+  counter-reset: outline-h4 outline-h5 outline-h6;
+}
+.markdown-body .sidebar-content .outline-h3 .outline-label:before {
+  counter-increment: outline-h3;
+  content: counter(outline-h2) '.' counter(outline-h3) '  ';
+}
+.markdown-body .sidebar-content .outline-h4 {
+  counter-reset: outline-h5 outline-h6;
+}
+.markdown-body .sidebar-content .outline-h4 .outline-label:before {
+  counter-increment: outline-h4;
+  content: counter(outline-h2) '.' counter(outline-h3) '.' counter(outline-h4)
+    '  ';
+}
+.markdown-body .sidebar-content .outline-h5 {
+  counter-reset: outline-h6;
+}
+.markdown-body .sidebar-content .outline-h5 .outline-label:before {
+  counter-increment: outline-h5;
+  content: counter(outline-h2) '.' counter(outline-h3) '.' counter(outline-h4)
+    '.' counter(outline-h5) '  ';
+}
+
+.markdown-body .sidebar-content {
+  /* 侧边栏的字体修改 */
+  font-family: var(--ui-font);
+  list-style: none;
+}
+
+/* 元数据（如 YAML front matter）的背景框 */
+.markdown-body pre.md-meta-block {
+  background: #cccccc;
+  padding: 1.4em;
+  font-family: var(--code-font), var(--ui-font), monospace;
+  font-size: 0.8em;
+}
+
+.markdown-body #write > h3.md-focus:before,
+.markdown-body #write > h4.md-focus:before,
+.markdown-body #write > h5.md-focus:before,
+.markdown-body #write > h6.md-focus:before,
+.markdown-body h3.md-focus:before,
+.markdown-body h4.md-focus:before,
+.markdown-body h5.md-focus:before,
+.markdown-body h6.md-focus:before {
+  color: inherit;
+  border: inherit;
+  border-radius: inherit;
+  position: inherit;
+  left: initial;
+  float: none;
+  top: initial;
+  font-size: inherit;
+  padding-left: inherit;
+  padding-right: inherit;
+  vertical-align: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.markdown-body #write {
+  counter-reset: heading-h2 heading-h3 heading-h4 heading-h5 heading-h6;
+}
+.markdown-body #write h1,
+.markdown-body #write h2,
+.markdown-body #write h3,
+.markdown-body #write h4,
+.markdown-body #write h5,
+.markdown-body #write h6 {
+  font-weight: bold;
+  break-after: avoid-page !important;
+}
+.markdown-body .markdown-body #write h1 {
+  font-family: var(--heading-Latin-font), var(--title-Chinese-font), serif;
+  text-align: center;
+  column-span: all;
+  font-size: var(--title-font-size);
+}
+.markdown-body #write h2 {
+  font-family: var(--heading-Latin-font), var(--h2-Chinese-font), serif;
+  font-size: var(--h2-font-size);
+}
+.markdown-body #write h3 {
+  font-family: var(--heading-Latin-font), var(--h3-Chinese-font), serif;
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-font-size);
+}
+.markdown-body #write h4 {
+  font-family: var(--heading-Latin-font), var(--h4-Chinese-font), serif;
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-font-size);
+}
+.markdown-body #write h5 {
+  font-family: var(--heading-Latin-font), var(--h5-Chinese-font), serif;
+  font-size: var(--h5-font-size);
+  line-height: var(--h5-font-size);
+}
+.markdown-body #write h6 {
+  font-family: var(--heading-Latin-font), var(--h6-Chinese-font), serif;
+  font-size: var(--h6-font-size);
+  /* 没有写错，为了避免行距太小才这么写 */
+  line-height: var(--h5-font-size);
+}
+.markdown-body #write h1 {
+  counter-set: heading-h2 0 heading-h3 0 heading-h4 0 heading-h5 0 heading-h6 0;
+}
+.markdown-body #write h2 {
+  counter-set: heading-h3 0 heading-h4 0 heading-h5 0 heading-h6 0;
+}
+.markdown-body #write h3 {
+  counter-set: heading-h4 0 heading-h5 0 heading-h6 0;
+}
+.markdown-body #write h4 {
+  counter-set: heading-h5 0 heading-h6 0;
+}
+.markdown-body #write h5 {
+  counter-set: heading-h6 0;
+}
+.markdown-body #write h2:before,
+h2.md-focus.md-heading:before {
+  content: counter(heading-h2);
+  counter-increment: heading-h2;
+  margin-right: 1.2em;
+}
+
+.markdown-body #write h3:before,
+h3.md-focus.md-heading:before {
+  content: counter(heading-h2) '.' counter(heading-h3);
+  counter-increment: heading-h3;
+  margin-right: 1.2em;
+}
+
+.markdown-body #write h4:before,
+h4.md-focus.md-heading:before {
+  content: counter(heading-h2) '.' counter(heading-h3) '.' counter(heading-h4);
+  counter-increment: heading-h4;
+  margin-right: 1.2em;
+}
+
+.markdown-body #write h5:before,
+h5.md-focus.md-heading:before {
+  content: counter(heading-h2) '.' counter(heading-h3) '.' counter(heading-h4)
+    '.' counter(heading-h5);
+  counter-increment: heading-h5;
+  margin-right: 1.2em;
+}
+
+.markdown-body #write h6:before,
+h6.md-focus.md-heading:before {
+  content: counter(heading-h2) '.' counter(heading-h3) '.' counter(heading-h4)
+    '.' counter(heading-h5) '.' counter(heading-h6);
+  counter-increment: heading-h6;
+  margin-right: 1.2em;
+}
+
+/* 参考文献（脚注）块，在 Typora 中的样式 */
+.markdown-body .md-def-footnote {
+  display: flex;
+  position: relative;
+  font-size: 0.95em;
+  opacity: 1;
+  margin: 0;
+}
+.markdown-body .md-def-footnote:not(:first-child),
+.md-def-footnote + *:not(.md-def-footnote) {
+  margin-top: 1em;
+}
+.markdown-body .md-def-footnote + .md-def-footnote {
+  margin-top: 0.5em;
+}
+.markdown-body .md-def-footnote .md-def-name {
+  font-weight: inherit;
+  padding: 0;
+  flex-shrink: 0;
+  width: 3em;
+  margin-inline-start: -1ch;
+  white-space: nowrap;
+  text-align: left;
+}
+.markdown-body .md-def-footnote .md-def-name:before {
+  content: '［';
+  position: static;
+  color: inherit;
+}
+.markdown-body .md-def-footnote .md-def-name:after {
+  content: '］';
+  position: static;
+  color: inherit;
+}
+.markdown-body .md-def-footnote .md-reverse-footnote-area {
+  display: none;
+}
+.markdown-body .md-def-footnote:hover .md-reverse-footnote-area {
+  position: absolute;
+  right: -6px;
+  display: inline;
+}
+
+/* 参考文献（脚注）块，在导出 HTML 或 PDF 时的样式（导出后的 HTML tag 和 Typora 中的 HTML tag 不一致） */
+.markdown-body .footnotes-area {
+  padding-inline-start: 2.5em;
+}
+.markdown-body .footnotes-area hr {
+  display: none;
+}
+.markdown-body .footnotes-area .footnote-line {
+  color: var(--text-color);
+  font-size: 0.95em;
+  margin-top: 0.5em;
+}
+.markdown-body .footnotes-area .footnote-line *:not(.md-fn-count) {
+  display: inline-block;
+  vertical-align: top;
+}
+.markdown-body .footnotes-area .footnote-line span.md-fn-count {
+  font-weight: inherit;
+  padding: 0;
+  margin-inline-start: -3em;
+  white-space: nowrap;
+  display: inline-block;
+  width: 2.5em;
+}
+.markdown-body .footnotes-area .footnote-line span.md-fn-count:before {
+  content: '［';
+  position: static;
+  color: inherit;
+}
+.markdown-body .footnotes-area .footnote-line span.md-fn-count:after {
+  content: '］';
+  position: static;
+  color: inherit;
+}
+.markdown-body .footnotes-area .footnote-line a.reversefootnote {
+  display: none;
+}
+
+/* 参考文献（脚注）上标 */
+.markdown-body sup.md-footnote {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: inherit;
+}
+.markdown-body sup.md-footnote a {
+  color: inherit !important;
+}
+.markdown-body sup.md-footnote:not(.md-expand) {
+  margin-inline: -0.44em;
+}
+.markdown-body sup.md-footnote:not(.md-expand):before {
+  content: '［';
+}
+.markdown-body sup.md-footnote:not(.md-expand):after {
+  content: '］';
+}
+
+/* 无序列表 */
+.markdown-body #write ul {
+  list-style: disc;
+  padding-left: 2em;
+}
+.markdown-body #write ul ul {
+  /*list-style: circle;*/
+  /* 请勿删除“–”后的空格, 他们对缩进有一定影响, 下同 */
+  list-style: '–   ';
+}
+.markdown-body #write ul ul ul {
+  list-style: '◦  ';
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+}
+
+/* 有序列表 */
+.markdown-body #write ol {
+  list-style: decimal;
+}
+.markdown-body #write ol ol {
+  counter-reset: liist;
+  list-style: none;
+}
+.markdown-body #write ol ol > li {
+  counter-increment: liist;
+  position: relative;
+}
+.markdown-body #write ol ol > li::before {
+  content: '(' counter(liist, lower-alpha) ')';
+  position: absolute;
+  left: -1.8em;
+}
+.markdown-body #write ol ol ol {
+  counter-reset: liiist;
+  list-style: none;
+  margin: 0;
+}
+.markdown-body #write ol ol ol > li {
+  counter-increment: liiist;
+  position: relative;
+}
+.markdown-body #write ol ol ol > li::before {
+  content: counter(liiist, lower-roman) '.';
+  align-self: flex-end;
+  position: absolute;
+  left: -4.5em;
+  /* -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;*/
+  /* 为了让项目编号是重新用句点对齐而不是左对齐 */
+  width: 4em;
+  text-align: right;
+}
+
+.markdown-body #write ol,
+.markdown-body #write ul {
+  padding-inline-start: 2em;
+}
+
+.markdown-body #write li {
+  position: relative;
+}
+.markdown-body #write li + li,
+.markdown-body #write ul + ol > li,
+.markdown-body #write ol + ul > li,
+.markdown-body #write li > ul > li,
+.markdown-body #write li > ol > li {
+  margin-top: -0.8em;
+}
+
+/* task列表 */
+.markdown-body .md-task-list-item > input {
+  margin-top: 0.42em;
+  margin-left: -1.5em;
+  width: 1em !important;
+  height: 1em !important;
+}
+
+.markdown-body #write table {
+  /* 三线表第一条线宽度 */
+  border-top: 1.2pt solid;
+  /* 三线表第二条线宽度 */
+  border-bottom: 1.2pt solid;
+  font-family: var(--table-font), var(--base-Latin-font),
+    var(--base-Chinese-font), serif;
+  /* font-size: var(--base-font-size); */
+  text-align: center;
+  break-inside: avoid-page;
+  border-spacing: 6px;
+  /* 自动布局表格宽度，如果有时内容太紧建议直接加空格吧，我自己看不惯和页面等宽的大表格 */
+  width: auto;
+  /* 使表格默认居中；虽然这个代码不好，但好像没别的实现办法 */
+  margin: 0 auto;
+}
+.markdown-body #write table td {
+  padding: 2px;
+}
+.markdown-body #write table tr {
+  padding: 2px;
+}
+.markdown-body #write th {
+  padding: 0px 6px;
+}
+.markdown-body #write thead {
+  /* 表格标题（首行）样式 */
+  /* 三线表表头的线 */
+  border-bottom: 0.5pt solid;
+  font-family: var(--table-title-font), var(--heading-Latin-font),
+    var(--heading-Chinese-font), serif !important;
+  /* font-size: var(--base-font-size); */
+  font-weight: var(--strong-weight);
+}
+
+/* 一个>的引言仅为两字符缩进，使用>>的引言为传统引言样式，具有左竖线、左缩进 */
+.markdown-body blockquote {
+  font-style: normal;
+  font-family: var(--quote-font), var(--base-Latin-font),
+    var(--base-Chinese-font), -apple-system, serif;
+  font-size: var(--quote-font-size);
+  /* 文字离左边框的距离 */
+  padding-left: 2em;
+  padding-right: 2em;
+  /* 左边框离页面边的距离 */
+  margin-left: 0;
+}
+
+.markdown-body blockquote blockquote {
+  border-left: 4px solid hsl(0, 0%, 70%);
+  padding-left: calc(2ch - 4px);
+  padding-right: 0;
+  margin-left: -4px;
+  border-radius: 0;
+}
+
+/* 行内代码 */
+.markdown-body code {
+  font-family: var(--code-font), var(--ui-font), monospace;
+}
+
+.markdown-body h1 code,
+.markdown-body h2 code,
+.markdown-body h3 code,
+.markdown-body h4 code,
+.markdown-body h5 code,
+.markdown-body h6 code,
+.markdown-body p code,
+.markdown-body li code {
+  color: rgb(60, 112, 198);
+  background-color: #fefefe;
+  /* 阴影 */
+  box-shadow: 0 0 1px 1px #c8d3df;
+  font-family: var(--code-font), var(--ui-font), monospace;
+  box-sizing: border-box;
+  border-right: 0px;
+  margin: 0 2px 0 2px;
+  padding: 0 2px 0 2px;
+  /* 圆角 */
+  border-radius: 2px 2px 2px 2px;
+}
+
+/* 代码块样式 */
+.markdown-body .md-fences,
+.markdown-body .CodeMirror pre,
+.markdown-body .CodeMirror-wrap {
+  /* padding: 10px; */
+  font-size: 1em;
+}
+
+.markdown-body .CodeMirror-code pre,
+.markdown-body .CodeMirror-sizer {
+  font-family: var(--code-font), var(--ui-font), monospace;
+}
+
+/* 目录 */
+.markdown-body .md-toc {
+  font-size: var(--toc-font-size);
+}
+
+.markdown-body .md-toc-content {
+  margin-left: 2em;
+  /* 修复缺失上级标题时无法递增 */
+  counter-reset: toc-h2 toc-h3 toc-h4 toc-h5 toc-h6;
+  break-after: page;
+}
+
+.markdown-body .md-toc-inner {
+  margin-left: 0 !important;
+  color: var(--text-color) !important;
+}
+
+.markdown-body .md-toc-item {
+  color: var(--text-color) !important;
+}
+
+/* 目录标题内容属性 */
+.markdown-body .md-toc-h2,
+.markdown-body .md-toc-h3,
+.markdown-body .md-toc-h4,
+.markdown-body .md-toc-h5,
+.markdown-body .md-toc-h6 {
+  font-size: var(--toc-font-size);
+  font-family: var(--toc-font), var(--base-Latin-font), var(--base-Chinese-font),
+    serif;
+}
+
+.markdown-body .md-toc-h2 {
+  font-weight: var(--strong-weight);
+}
+
+/* 目录标题前 */
+.markdown-body .md-toc-content .md-toc-h1 {
+  display: var(--toc-show-title);
+  counter-set: toc-h2 0 toc-h3 0 toc-h4 0 toc-h5 0 toc-h6 0;
+}
+.markdown-body .md-toc-content .md-toc-h2 {
+  counter-set: toc-h3 0 toc-h4 0 toc-h5 0 toc-h6 0;
+}
+.markdown-body .md-toc-content .md-toc-h3 {
+  counter-set: toc-h4 0 toc-h5 0 toc-h6 0;
+}
+.markdown-body .md-toc-content .md-toc-h4 {
+  counter-set: toc-h5 0 toc-h6 0;
+}
+.markdown-body .md-toc-content .md-toc-h5 {
+  counter-set: toc-h6 0;
+}
+.markdown-body .md-toc-content .md-toc-h2:before {
+  counter-increment: toc-h2;
+  content: counter(toc-h2);
+  margin-right: 1em;
+  font-weight: var(--strong-weight);
+}
+.markdown-body .md-toc-content .md-toc-h3:before {
+  counter-increment: toc-h3;
+  content: counter(toc-h2) '.' counter(toc-h3);
+  margin-left: 1.5em;
+  margin-right: 0.5em;
+}
+.markdown-body .md-toc-content .md-toc-h4:before {
+  counter-increment: toc-h4;
+  content: counter(toc-h2) '.' counter(toc-h3) '.' counter(toc-h4);
+  margin-left: 3.5em;
+  margin-right: 0.5em;
+}
+.markdown-body .md-toc-content .md-toc-h5:before {
+  counter-increment: toc-h5;
+  content: counter(toc-h2) '.' counter(toc-h3) '.' counter(toc-h4) '.'
+    counter(toc-h5);
+  margin-left: 5.5em;
+  margin-right: 0.5em;
+}
+.markdown-body .md-toc-content .md-toc-h6:before {
+  counter-increment: toc-h6;
+  content: counter(toc-h2) '.' counter(toc-h3) '.' counter(toc-h4) '.'
+    counter(toc-h5) '.' counter(toc-h6);
+  margin-left: 7.5em;
+  margin-right: 0.5em;
+}
diff --git a/deepsearcher/templates/static/themes/light.css b/deepsearcher/templates/static/themes/light.css
new file mode 100644
index 0000000..a4ace0e
--- /dev/null
+++ b/deepsearcher/templates/static/themes/light.css
@@ -0,0 +1,945 @@
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  margin: 0;
+  color: #24292f;
+  background-color: #ffffff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  padding: 20px;
+}
+
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+  width: 16px;
+  height: 16px;
+  content: ' ';
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+}
+
+.markdown-body details,
+.markdown-body figcaption,
+.markdown-body figure {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body [hidden] {
+  display: none !important;
+}
+
+.markdown-body a {
+  background-color: transparent;
+  color: #0969da;
+  text-decoration: none;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+  outline-width: 0;
+}
+
+.markdown-body abbr[title] {
+  border-bottom: none;
+  text-decoration: underline dotted;
+}
+
+.markdown-body b,
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.markdown-body dfn {
+  font-style: italic;
+}
+
+.markdown-body h1 {
+  margin: 0.67em 0;
+  font-weight: 600;
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+}
+
+.markdown-body mark {
+  background-color: #fff8c5;
+  color: #24292f;
+}
+
+.markdown-body small {
+  font-size: 90%;
+}
+
+.markdown-body sub,
+.markdown-body sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.markdown-body sub {
+  bottom: -0.25em;
+}
+
+.markdown-body sup {
+  top: -0.5em;
+}
+
+.markdown-body img {
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: #ffffff;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre,
+.markdown-body samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+.markdown-body figure {
+  margin: 1em 40px;
+}
+
+.markdown-body hr {
+  box-sizing: content-box;
+  overflow: hidden;
+  background: transparent;
+  border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #d0d7de;
+  border: 0;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body [type='button'],
+.markdown-body [type='reset'],
+.markdown-body [type='submit'] {
+  -webkit-appearance: button;
+}
+
+.markdown-body [type='button']::-moz-focus-inner,
+.markdown-body [type='reset']::-moz-focus-inner,
+.markdown-body [type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.markdown-body [type='button']:-moz-focusring,
+.markdown-body [type='reset']:-moz-focusring,
+.markdown-body [type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+.markdown-body [type='checkbox'],
+.markdown-body [type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body [type='number']::-webkit-inner-spin-button,
+.markdown-body [type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.markdown-body [type='search'] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+.markdown-body [type='search']::-webkit-search-cancel-button,
+.markdown-body [type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.markdown-body ::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+.markdown-body ::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body hr::before {
+  display: table;
+  content: '';
+}
+
+.markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body details:not([open]) > *:not(summary) {
+  display: none !important;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+  line-height: 10px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #f6f8fa;
+  border: solid 1px rgba(175, 184, 193, 0.2);
+  border-bottom-color: rgba(175, 184, 193, 0.2);
+  border-radius: 6px;
+  box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h2 {
+  font-weight: 600;
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+}
+
+.markdown-body h3 {
+  font-weight: 600;
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-weight: 600;
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.markdown-body h6 {
+  font-weight: 600;
+  font-size: 0.85em;
+  color: #57606a;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: #57606a;
+  border-left: 0.25em solid #d0d7de;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ul ul ol,
+.markdown-body ul ol ol,
+.markdown-body ol ul ol,
+.markdown-body ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body tt,
+.markdown-body code {
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+  font-size: 12px;
+  word-wrap: normal;
+}
+
+.markdown-body .octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}
+
+.markdown-body ::placeholder {
+  color: #6e7781;
+  opacity: 1;
+}
+
+.markdown-body input::-webkit-outer-spin-button,
+.markdown-body input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.markdown-body .pl-c {
+  color: #6e7781;
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: #0550ae;
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: #8250df;
+}
+
+.markdown-body .pl-smi,
+.markdown-body .pl-s .pl-s1 {
+  color: #24292f;
+}
+
+.markdown-body .pl-ent {
+  color: #116329;
+}
+
+.markdown-body .pl-k {
+  color: #cf222e;
+}
+
+.markdown-body .pl-s,
+.markdown-body .pl-pds,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sre,
+.markdown-body .pl-sr .pl-sra {
+  color: #0a3069;
+}
+
+.markdown-body .pl-v,
+.markdown-body .pl-smw {
+  color: #953800;
+}
+
+.markdown-body .pl-bu {
+  color: #82071e;
+}
+
+.markdown-body .pl-ii {
+  color: #f6f8fa;
+  background-color: #82071e;
+}
+
+.markdown-body .pl-c2 {
+  color: #f6f8fa;
+  background-color: #cf222e;
+}
+
+.markdown-body .pl-sr .pl-cce {
+  font-weight: bold;
+  color: #116329;
+}
+
+.markdown-body .pl-ml {
+  color: #3b2300;
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: bold;
+  color: #0550ae;
+}
+
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: #24292f;
+}
+
+.markdown-body .pl-mb {
+  font-weight: bold;
+  color: #24292f;
+}
+
+.markdown-body .pl-md {
+  color: #82071e;
+  background-color: #ffebe9;
+}
+
+.markdown-body .pl-mi1 {
+  color: #116329;
+  background-color: #dafbe1;
+}
+
+.markdown-body .pl-mc {
+  color: #953800;
+  background-color: #ffd8b5;
+}
+
+.markdown-body .pl-mi2 {
+  color: #eaeef2;
+  background-color: #0550ae;
+}
+
+.markdown-body .pl-mdr {
+  font-weight: bold;
+  color: #8250df;
+}
+
+.markdown-body .pl-ba {
+  color: #57606a;
+}
+
+.markdown-body .pl-sg {
+  color: #8c959f;
+}
+
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: #0a3069;
+}
+
+.markdown-body [data-catalyst] {
+  display: block;
+}
+
+.markdown-body g-emoji {
+  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-size: 1em;
+  font-style: normal !important;
+  font-weight: 400;
+  line-height: 1;
+  vertical-align: -0.075em;
+}
+
+.markdown-body g-emoji img {
+  width: 1em;
+  height: 1em;
+}
+
+.markdown-body::before {
+  display: table;
+  content: '';
+}
+
+.markdown-body::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body .absent {
+  color: #cf222e;
+}
+
+.markdown-body .anchor {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px;
+  line-height: 1;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body sup > a::before {
+  content: '[';
+}
+
+.markdown-body sup > a::after {
+  content: ']';
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: #24292f;
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+.markdown-body h1 tt,
+.markdown-body h1 code,
+.markdown-body h2 tt,
+.markdown-body h2 code,
+.markdown-body h3 tt,
+.markdown-body h3 code,
+.markdown-body h4 tt,
+.markdown-body h4 code,
+.markdown-body h5 tt,
+.markdown-body h5 code,
+.markdown-body h6 tt,
+.markdown-body h6 code {
+  padding: 0 0.2em;
+  font-size: inherit;
+}
+
+.markdown-body ul.no-list,
+.markdown-body ol.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+
+.markdown-body ol[type='1'] {
+  list-style-type: decimal;
+}
+
+.markdown-body ol[type='a'] {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body ol[type='i'] {
+  list-style-type: lower-roman;
+}
+
+.markdown-body div > ol:not([type]) {
+  list-style-type: decimal;
+}
+
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body li > p {
+  margin-top: 16px;
+}
+
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid #d0d7de;
+}
+
+.markdown-body table tr {
+  background-color: #ffffff;
+  border-top: 1px solid hsla(210, 18%, 87%, 1);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.markdown-body table img {
+  background-color: transparent;
+}
+
+.markdown-body img[align='right'] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align='left'] {
+  padding-right: 20px;
+}
+
+.markdown-body .emoji {
+  max-width: none;
+  vertical-align: text-top;
+  background-color: transparent;
+}
+
+.markdown-body span.frame {
+  display: block;
+  overflow: hidden;
+}
+
+.markdown-body span.frame > span {
+  display: block;
+  float: left;
+  width: auto;
+  padding: 7px;
+  margin: 13px 0 0;
+  overflow: hidden;
+  border: 1px solid #d0d7de;
+}
+
+.markdown-body span.frame span img {
+  display: block;
+  float: left;
+}
+
+.markdown-body span.frame span span {
+  display: block;
+  padding: 5px 0 0;
+  clear: both;
+  color: #24292f;
+}
+
+.markdown-body span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-center > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.markdown-body span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.markdown-body span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-right > span {
+  display: block;
+  margin: 13px 0 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+
+.markdown-body span.float-left {
+  display: block;
+  float: left;
+  margin-right: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-left span {
+  margin: 13px 0 0;
+}
+
+.markdown-body span.float-right {
+  display: block;
+  float: right;
+  margin-left: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-right > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body code,
+.markdown-body tt {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(175, 184, 193, 0.2);
+  border-radius: 6px;
+}
+
+.markdown-body code br,
+.markdown-body tt br {
+  display: none;
+}
+
+.markdown-body del code {
+  text-decoration: inherit;
+}
+
+.markdown-body pre code {
+  font-size: 100%;
+}
+
+.markdown-body pre > code {
+  padding: 0;
+  margin: 0;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+}
+
+.markdown-body pre code,
+.markdown-body pre tt {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.markdown-body .csv-data td,
+.markdown-body .csv-data th {
+  padding: 5px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.markdown-body .csv-data .blob-num {
+  padding: 10px 8px 9px;
+  text-align: right;
+  background: #ffffff;
+  border: 0;
+}
+
+.markdown-body .csv-data tr {
+  border-top: 0;
+}
+
+.markdown-body .csv-data th {
+  font-weight: 600;
+  background: #f6f8fa;
+  border-top: 0;
+}
+
+.markdown-body .footnotes {
+  font-size: 12px;
+  color: #57606a;
+  border-top: 1px solid #d0d7de;
+}
+
+.markdown-body .footnotes ol {
+  padding-left: 16px;
+}
+
+.markdown-body .footnotes li {
+  position: relative;
+}
+
+.markdown-body .footnotes li:target::before {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  bottom: -8px;
+  left: -24px;
+  pointer-events: none;
+  content: '';
+  border: 2px solid #0969da;
+  border-radius: 6px;
+}
+
+.markdown-body .footnotes li:target {
+  color: #24292f;
+}
+
+.markdown-body .footnotes .data-footnote-backref g-emoji {
+  font-family: monospace;
+}
+
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+
+.markdown-body .task-list-item label {
+  font-weight: 400;
+}
+
+.markdown-body .task-list-item.enabled label {
+  cursor: pointer;
+}
+
+.markdown-body .task-list-item + .task-list-item {
+  margin-top: 3px;
+}
+
+.markdown-body .task-list-item .handle {
+  display: none;
+}
+
+.markdown-body .task-list-item-checkbox {
+  margin: 0 0.2em 0.25em -1.6em;
+  vertical-align: middle;
+}
+
+.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
+  margin: 0 -1.6em 0.25em 0.2em;
+}
+
+.markdown-body ::-webkit-calendar-picker-indicator {
+  filter: invert(50%);
+}
diff --git a/deepsearcher/templates/static/themes/newsprint.css b/deepsearcher/templates/static/themes/newsprint.css
new file mode 100644
index 0000000..f234103
--- /dev/null
+++ b/deepsearcher/templates/static/themes/newsprint.css
@@ -0,0 +1,641 @@
+/* meyer reset -- http://meyerweb.com/eric/tools/css/reset/ , v2.0 | 20110126 | License: none (public domain) */
+
+@include-when-export url(https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext);
+
+/* =========== */
+
+/* pt-serif-regular - latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Serif'), local('PTSerif-Regular'),
+    url('./newsprint/pt-serif-v11-latin-regular.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+/* pt-serif-italic - latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: normal;
+  src: local('PT Serif Italic'), local('PTSerif-Italic'),
+    url('./newsprint/pt-serif-v11-latin-italic.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+/* pt-serif-700 - latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: bold;
+  src: local('PT Serif Bold'), local('PTSerif-Bold'),
+    url('./newsprint/pt-serif-v11-latin-700.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+/* pt-serif-700italic - latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: bold;
+  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'),
+    url('./newsprint/pt-serif-v11-latin-700italic.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+:root {
+  --active-file-bg-color: #dadada;
+  --active-file-bg-color: rgba(32, 43, 51, 0.63);
+  --active-file-text-color: white;
+  --bg-color: #f3f2ee;
+  --text-color: #1f0909;
+  --control-text-color: #444;
+  --rawblock-edit-panel-bd: #e5e5e5;
+
+  --select-text-bg-color: rgba(32, 43, 51, 0.63);
+  --select-text-font-color: white;
+}
+
+.markdown-body pre {
+  --select-text-bg-color: #36284e;
+  --select-text-font-color: #fff;
+}
+
+.markdown-body {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  background-color: #f3f2ee;
+  font-family: 'PT Serif', 'Times New Roman', Times, serif;
+  color: #1f0909;
+  line-height: 1.5em;
+  padding: 20px;
+}
+
+/*#write {
+	overflow-x: auto;
+    max-width: initial;
+	padding-left: calc(50% - 17em);
+    padding-right: calc(50% - 17em);
+}
+
+@media (max-width: 36em) {
+ 	#write {
+ 		padding-left: 1em;
+    	padding-right: 1em;
+ 	}
+}*/
+
+.markdown-body #write {
+  max-width: 40em;
+}
+
+@media only screen and (min-width: 1400px) {
+  .markdown-body #write {
+    max-width: 914px;
+  }
+}
+
+.markdown-body ol li {
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+.markdown-body ul li {
+  list-style-type: disc;
+  list-style-position: outside;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  list-style: none;
+}
+
+.markdown-body blockquote,
+.markdown-body q {
+  quotes: none;
+}
+.markdown-body blockquote:before,
+.markdown-body blockquote:after,
+.markdown-body q:before,
+.markdown-body q:after {
+  content: '';
+  content: none;
+}
+.markdown-body table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/* styles */
+
+/* ====== */
+
+/* headings */
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: bold;
+}
+.markdown-body h1 {
+  font-size: 1.875em;
+  /*30 / 16*/
+  line-height: 1.6em;
+  /* 48 / 30*/
+  margin-top: 2em;
+}
+.markdown-body h2,
+.markdown-body h3 {
+  font-size: 1.3125em;
+  /*21 / 16*/
+  line-height: 1.15;
+  /*24 / 21*/
+  margin-top: 2.285714em;
+  /*48 / 21*/
+  margin-bottom: 1.15em;
+  /*24 / 21*/
+}
+.markdown-body h3 {
+  font-weight: normal;
+}
+.markdown-body h4 {
+  font-size: 1.125em;
+  /*18 / 16*/
+  margin-top: 2.67em;
+  /*48 / 18*/
+}
+.markdown-body h5,
+.markdown-body h6 {
+  font-size: 1em;
+  /*16*/
+}
+.markdown-body h1 {
+  border-bottom: 1px solid;
+  margin-bottom: 1.875em;
+  padding-bottom: 0.8125em;
+}
+/* links */
+
+.markdown-body a {
+  text-decoration: none;
+  color: #065588;
+}
+.markdown-body a:hover,
+.markdown-body a:active {
+  text-decoration: underline;
+}
+/* block spacing */
+
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body .md-fences {
+  margin-bottom: 1.5em;
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-bottom: 1.5em;
+}
+/* blockquote */
+
+.markdown-body blockquote {
+  font-style: italic;
+  border-left: 5px solid;
+  margin-left: 2em;
+  padding-left: 1em;
+}
+/* lists */
+
+.markdown-body ul,
+.markdown-body ol {
+  margin: 0 0 1.5em 1.5em;
+}
+/* tables */
+.markdown-body .md-meta,
+.markdown-body .md-before,
+.markdown-body .md-after {
+  color: #999;
+}
+
+.markdown-body table {
+  margin-bottom: 1.5em;
+  /*24 / 16*/
+  font-size: 1em;
+  /* width: 100%; */
+}
+.markdown-body thead th,
+.markdown-body tfoot th {
+  padding: 0.25em 0.25em 0.25em 0.4em;
+  text-transform: uppercase;
+}
+.markdown-body th {
+  text-align: left;
+}
+.markdown-body td {
+  vertical-align: top;
+  padding: 0.25em 0.25em 0.25em 0.4em;
+}
+
+.markdown-body code,
+.markdown-body .md-fences {
+  background-color: #dadada;
+}
+
+.markdown-body code {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.markdown-body .md-fences {
+  margin-left: 2em;
+  margin-bottom: 3em;
+  padding-left: 1ch;
+  padding-right: 1ch;
+}
+
+.markdown-body pre,
+.markdown-body code,
+.markdown-body tt {
+  font-size: 0.875em;
+  line-height: 1.714285em;
+}
+/* some fixes */
+
+.markdown-body h1 {
+  line-height: 1.3em;
+  font-weight: normal;
+  margin-bottom: 0.5em;
+}
+
+.markdown-body p + ul,
+.markdown-body p + ol {
+  margin-top: 0.5em;
+}
+
+.markdown-body h3 + ul,
+.markdown-body h4 + ul,
+.markdown-body h5 + ul,
+.markdown-body h6 + ul,
+.markdown-body h3 + ol,
+.markdown-body h4 + ol,
+.markdown-body h5 + ol,
+.markdown-body h6 + ol {
+  margin-top: 0.5em;
+}
+
+.markdown-body li > ul,
+.markdown-body li > ol {
+  margin-top: inherit;
+  margin-bottom: 0;
+}
+
+.markdown-body li ol > li {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body li li ol > li {
+  list-style-type: lower-roman;
+}
+
+.markdown-body h2,
+.markdown-body h3 {
+  margin-bottom: 0.75em;
+}
+.markdown-body hr {
+  border-top: none;
+  border-right: none;
+  border-bottom: 1px solid;
+  border-left: none;
+}
+.markdown-body h1 {
+  border-color: #c5c5c5;
+}
+.markdown-body blockquote {
+  border-color: #bababa;
+  color: #656565;
+}
+
+.markdown-body blockquote ul,
+.markdown-body blockquote ol {
+  margin-left: 0;
+}
+
+.markdown-body .ty-table-edit {
+  background-color: transparent;
+}
+.markdown-body thead {
+  background-color: #dadada;
+}
+.markdown-body tr:nth-child(even) {
+  background: #e8e7e7;
+}
+.markdown-body hr {
+  border-color: #c5c5c5;
+}
+.markdown-body .task-list {
+  padding-left: 1rem;
+}
+
+.markdown-body .md-task-list-item {
+  padding-left: 1.5rem;
+  list-style-type: none;
+}
+
+.markdown-body .md-task-list-item > input:before {
+  content: '\221A';
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.6rem;
+  vertical-align: middle;
+  text-align: center;
+  color: #ddd;
+  background-color: #f3f2ee;
+}
+
+.markdown-body .md-task-list-item > input:checked:before,
+.markdown-body .md-task-list-item > input[checked]:before {
+  color: inherit;
+}
+
+.markdown-body #write pre.md-meta-block {
+  min-height: 1.875rem;
+  color: #555;
+  border: 0px;
+  background: transparent;
+  margin-top: -4px;
+  margin-left: 1em;
+  margin-top: 1em;
+}
+
+.markdown-body .md-image > .md-meta {
+  color: #9b5146;
+}
+
+.markdown-body .md-image > .md-meta {
+  font-family: Menlo, 'Ubuntu Mono', Consolas, 'Courier New', 'Microsoft Yahei',
+    'Hiragino Sans GB', 'WenQuanYi Micro Hei', serif;
+}
+
+.markdown-body #write > h3.md-focus:before {
+  left: -1.5rem;
+  color: #999;
+  border-color: #999;
+}
+.markdown-body #write > h4.md-focus:before {
+  left: -1.5rem;
+  top: 0.25rem;
+  color: #999;
+  border-color: #999;
+}
+.markdown-body #write > h5.md-focus:before {
+  left: -1.5rem;
+  top: 0.3125rem;
+  color: #999;
+  border-color: #999;
+}
+.markdown-body #write > h6.md-focus:before {
+  left: -1.5rem;
+  top: 0.3125rem;
+  color: #999;
+  border-color: #999;
+}
+
+.markdown-body .md-toc:focus .md-toc-content {
+  margin-top: 19px;
+}
+
+.markdown-body .md-toc-content:empty:before {
+  color: #065588;
+}
+.markdown-body .md-toc-item {
+  color: #065588;
+}
+.markdown-body #write div.md-toc-tooltip {
+  background-color: #f3f2ee;
+}
+
+.markdown-body #typora-sidebar {
+  background-color: #f3f2ee;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
+}
+
+.markdown-body .pin-outline #typora-sidebar {
+  background: inherit;
+  box-shadow: none;
+  border-right: 1px dashed;
+}
+
+.markdown-body .pin-outline #typora-sidebar:hover .outline-title-wrapper {
+  border-left: 1px dashed;
+}
+
+.markdown-body .outline-item:hover {
+  background-color: #dadada;
+  border-left: 28px solid #dadada;
+  border-right: 18px solid #dadada;
+}
+
+.markdown-body .typora-node .outline-item:hover {
+  border-right: 28px solid #dadada;
+}
+
+.markdown-body .outline-expander:before {
+  content: '\f0da';
+  font-family: FontAwesome;
+  font-size: 14px;
+  top: 1px;
+}
+
+.markdown-body .outline-expander:hover:before,
+.markdown-body .outline-item-open > .outline-item > .outline-expander:before {
+  content: '\f0d7';
+}
+
+.markdown-body .modal-content {
+  background-color: #f3f2ee;
+}
+
+.markdown-body .auto-suggest-container ul li {
+  list-style-type: none;
+}
+
+/** UI for electron */
+
+.markdown-body .megamenu-menu,
+.markdown-body #top-titlebar,
+.markdown-body #top-titlebar *,
+.markdown-body .megamenu-content {
+  background: #f3f2ee;
+  color: #1f0909;
+}
+
+.markdown-body .megamenu-menu-header {
+  border-bottom: 1px dashed #202b33;
+}
+
+.markdown-body .megamenu-menu {
+  box-shadow: none;
+  border-right: 1px dashed;
+}
+
+.markdown-body header,
+.markdown-body .context-menu,
+.markdown-body .megamenu-content,
+.markdown-body footer {
+  font-family: 'PT Serif', 'Times New Roman', Times, serif;
+  color: #1f0909;
+}
+
+.markdown-body #megamenu-back-btn {
+  color: #1f0909;
+  border-color: #1f0909;
+}
+
+.markdown-body .megamenu-menu-header #megamenu-menu-header-title:before {
+  color: #1f0909;
+}
+
+.markdown-body .megamenu-menu-list li a:hover,
+.markdown-body .megamenu-menu-list li a.active {
+  color: inherit;
+  background-color: #e8e7df;
+}
+
+.markdown-body .long-btn:hover {
+  background-color: #e8e7df;
+}
+
+.markdown-body #recent-file-panel tbody tr:nth-child(2n-1) {
+  background-color: transparent !important;
+}
+
+.markdown-body .megamenu-menu-panel tbody tr:hover td:nth-child(2) {
+  color: inherit;
+}
+
+.markdown-body .megamenu-menu-panel .btn {
+  background-color: #d2d1d1;
+}
+
+.markdown-body .btn-default {
+  background-color: transparent;
+}
+
+.markdown-body .typora-sourceview-on #toggle-sourceview-btn,
+.markdown-body .ty-show-word-count #footer-word-count {
+  background: #c7c5c5;
+}
+
+.markdown-body #typora-quick-open {
+  background-color: inherit;
+}
+
+.markdown-body .md-diagram-panel {
+  margin-top: 8px;
+}
+
+.markdown-body .file-list-item-file-name {
+  font-weight: initial;
+}
+
+.markdown-body .file-list-item-summary {
+  opacity: 1;
+}
+
+.markdown-body .file-list-item {
+  color: #777;
+}
+
+.markdown-body .file-list-item.active {
+  background-color: inherit;
+  color: black;
+}
+
+.markdown-body .ty-side-sort-btn.active {
+  background-color: inherit;
+}
+
+.markdown-body .file-list-item.active .file-list-item-file-name {
+  font-weight: bold;
+}
+
+.markdown-body .file-list-item {
+  opacity: 1 !important;
+}
+
+.markdown-body .file-library-node.active > .file-node-background {
+  background-color: rgba(32, 43, 51, 0.63);
+  background-color: var(--active-file-bg-color);
+}
+
+.markdown-body .file-tree-node.active > .file-node-content {
+  color: white;
+  color: var(--active-file-text-color);
+}
+
+.markdown-body .md-task-list-item > input {
+  margin-left: -1.7em;
+  margin-top: calc(1rem - 12px);
+  -webkit-appearance: button;
+}
+
+.markdown-body input {
+  border: 1px solid #aaa;
+}
+
+.markdown-body .megamenu-menu-header #megamenu-menu-header-title,
+.markdown-body .megamenu-menu-header:hover,
+.markdown-body .megamenu-menu-header:focus {
+  color: inherit;
+}
+
+.markdown-body .dropdown-menu .divider {
+  border-color: #e5e5e5;
+  opacity: 1;
+}
+
+/* https://github.com/typora/typora-issues/issues/2046 */
+.markdown-body .os-windows-7 strong,
+.markdown-body .os-windows-7 strong {
+  font-weight: 760;
+}
+
+.markdown-body .ty-preferences .btn-default {
+  background: transparent;
+}
+
+.markdown-body .ty-preferences .window-header {
+  border-bottom: 1px dashed #202b33;
+  box-shadow: none;
+}
+
+.markdown-body #sidebar-loading-template,
+.markdown-body #sidebar-loading-template.file-list-item {
+  color: #777;
+}
+
+.markdown-body .searchpanel-search-option-btn.active {
+  background: #777;
+  color: white;
+}
+
+.markdown-body .export-detail,
+.markdown-body .light .export-detail,
+.markdown-body .light .export-item.active,
+.markdown-body .light .export-items-list-control {
+  background: #e0e0e0;
+  border-radius: 2px;
+  font-weight: 700;
+  color: inherit;
+}
diff --git a/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-700.woff2 b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-700.woff2
new file mode 100644
index 0000000..6f6553d
Binary files /dev/null and b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-700.woff2 differ
diff --git a/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-700italic.woff2 b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-700italic.woff2
new file mode 100644
index 0000000..010abc9
Binary files /dev/null and b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-700italic.woff2 differ
diff --git a/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-italic.woff2 b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-italic.woff2
new file mode 100644
index 0000000..79c6bec
Binary files /dev/null and b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-italic.woff2 differ
diff --git a/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-regular.woff2 b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-regular.woff2
new file mode 100644
index 0000000..6e04521
Binary files /dev/null and b/deepsearcher/templates/static/themes/newsprint/pt-serif-v11-latin-regular.woff2 differ
diff --git a/deepsearcher/templates/static/themes/pixyll.css b/deepsearcher/templates/static/themes/pixyll.css
new file mode 100644
index 0000000..b953594
--- /dev/null
+++ b/deepsearcher/templates/static/themes/pixyll.css
@@ -0,0 +1,556 @@
+@include-when-export url(https://fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic&subset=latin-ext);
+@include-when-export url(https://fonts.googleapis.com/css?family=Lato:900,300&subset=latin-ext);
+
+:root {
+  --control-text-color: #777;
+}
+
+/**
+ * forked from pixyll.com
+ * MIT license
+ */
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Merriweather Light'), local('Merriweather-Light'),
+    url('./pixyll/merriweather-v19-latin-300.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: bold;
+  src: local('Merriweather Heavy'), local('Merriweather-Heavy'),
+    url('./pixyll/merriweather-v19-latin-700.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: normal;
+  src: local('Merriweather Light Italic'), local('Merriweather-LightItalic'),
+    url('./pixyll/merriweather-v19-latin-300italic.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: bold;
+  src: local('Merriweather Heavy Italic'), local('Merriweather-HeavyItalic'),
+    url('./pixyll/merriweather-v19-latin-700italic.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Lato Light'), local('Lato-Light'),
+    url('./pixyll/lato-v14-latin-300.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: bold;
+  src: local('Lato Black'), local('Lato-Blcak'),
+    url('./pixyll/lato-v14-latin-900.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: normal;
+  src: local('Lato LightItalic'), local('Lato-LightItalic'),
+    url('./pixyll/lato-v14-latin-300italic.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: bold;
+  src: local('Lato BlackItalic'), local('Lato-BlackItalic'),
+    url('./pixyll/lato-v14-latin-900italic.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+.markdown-body h1,
+.markdown-body .h1,
+.markdown-body .f1 {
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+.markdown-body h2,
+.markdown-body .h2,
+.markdown-body .f2 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+.markdown-body h3,
+.markdown-body .h3,
+.markdown-body .f3 {
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
+p,
+.markdown-body .p,
+.markdown-body .f4,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6,
+.markdown-body dl,
+.markdown-body ol,
+.markdown-body ul,
+.markdown-body pre[cid],
+.markdown-body div[cid],
+.markdown-body #typora-source {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+
+.markdown-body h4 {
+  font-size: 1.13rem;
+}
+/*
+ Pixyll
+ A simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff.
+ Best served with BASSCSS (http://jxnblk.github.io/basscss)
+ Crafted with <3 by John Otander (@4lpine) - ©2015 John Otander MIT License http://opensource.org/licenses/MIT
+
+*/
+
+.markdown-body {
+  font-family: 'Merriweather', 'PT Serif', Georgia, 'Times New Roman', 'STSong',
+    'Segoe UI Emoji', Serif;
+  line-height: 1.5rem;
+  font-weight: 400;
+  padding: 30px;
+}
+
+.markdown-body #write {
+  max-width: 914px;
+  color: #333;
+}
+
+@media only screen and (min-width: 1400px) {
+  .markdown-body #write {
+    max-width: 1100px;
+  }
+}
+
+@media only screen and (min-width: 1700px) {
+  .markdown-body #write {
+    max-width: 1200px;
+  }
+}
+
+.markdown-body .markdown-body img {
+  width: auto;
+  max-width: 100%;
+}
+.markdown-body {
+  font-size: 1.5rem;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.markdown-body .ty-table-edit {
+  background: #ededed;
+}
+
+.markdown-body table {
+  width: 100%;
+  font-size: 1.125rem;
+}
+.markdown-body table > thead > tr > th,
+.markdown-body table > thead > tr > td,
+.markdown-body table > tbody > tr > th,
+.markdown-body table > tbody > tr > td,
+.markdown-body table > tfoot > tr > th,
+.markdown-body table > tfoot > tr > td {
+  padding: 12px;
+  line-height: 1.2;
+  vertical-align: top;
+  border-top: 1px solid #333;
+}
+.markdown-body table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #333;
+}
+.markdown-body table > caption + thead > tr:first-child > th,
+.markdown-body table > caption + thead > tr:first-child > td,
+.markdown-body table > colgroup + thead > tr:first-child > th,
+.markdown-body table > colgroup + thead > tr:first-child > td,
+.markdown-body table > thead:first-child > tr:first-child > th,
+.markdown-body table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+.markdown-body table > tbody + tbody {
+  border-top: 2px solid #333;
+}
+.markdown-body p {
+  font-weight: 300;
+  line-height: 1.5;
+}
+.markdown-body bbr {
+  border-bottom: 1px black dotted;
+  cursor: help;
+}
+.markdown-body pre,
+.markdown-body code {
+  font-family: Menlo, Monaco, 'Courier New', monospace;
+}
+
+.markdown-body code,
+.markdown-body .md-fences {
+  color: #7a7a7a;
+}
+
+.markdown-body .md-fences {
+  padding: 1.125em;
+  margin-bottom: 0.88em;
+  font-size: 1rem;
+  border: 1px solid #7a7a7a;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.markdown-body blockquote {
+  padding: 1.33em;
+  font-style: italic;
+  border-left: 5px solid #7a7a7a;
+  color: #555;
+}
+.markdown-body blockquote em {
+  color: #000;
+}
+.markdown-body blockquote footer {
+  font-size: 0.85rem;
+  font-style: normal;
+  background-color: #fff;
+  color: #7a7a7a;
+  border-color: transparent;
+}
+.markdown-body h1,
+.markdown-body .h1,
+.markdown-body h2,
+.markdown-body .h2,
+.markdown-body h3,
+.markdown-body .h3,
+.markdown-body h4,
+.markdown-body .h4,
+.markdown-body h5,
+.markdown-body .h5,
+.markdown-body h6,
+.markdown-body .h6 {
+  font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
+  font-weight: bold;
+  line-height: 1.2;
+  margin: 1em 0 0.5em;
+}
+@media screen and (min-width: 48em) {
+  .markdown-body .h1,
+  .markdown-body h1 {
+    font-size: 3.25rem;
+  }
+  .markdown-body .h2,
+  .markdown-body h2 {
+    font-size: 2.298rem;
+  }
+  .markdown-body .h3,
+  .markdown-body h3 {
+    font-size: 1.625rem;
+  }
+  .markdown-body .h4,
+  .markdown-body h4 {
+    font-size: 1.3rem;
+  }
+  .markdown-body #write > h4.md-focus:before,
+  .markdown-body #write > h5.md-focus:before,
+  .markdown-body #write > h6.md-focus:before {
+    top: 1px;
+  }
+  .markdown-body .p,
+  .markdown-body p,
+  .markdown-body li {
+    font-size: 1.25rem;
+    line-height: 1.8;
+  }
+  .markdown-body table {
+    font-size: 1.25rem;
+  }
+}
+@media (max-width: 48em) {
+  .markdown-body blockquote {
+    margin-left: 1rem;
+    margin-right: 0;
+    padding: 0.5em;
+  }
+  .markdown-body .h1,
+  .markdown-body h1 {
+    font-size: 2.827rem;
+  }
+  .markdown-body .h2,
+  .markdown-body h2 {
+    font-size: 1.999rem;
+  }
+  .markdown-body .h3,
+  .markdown-body h3 {
+    font-size: 1.413rem;
+  }
+  .markdown-body .h4,
+  .markdown-body h4 {
+    font-size: 1.3rem;
+  }
+}
+@media screen and (min-width: 64em) {
+  .markdown-body .h1,
+  .markdown-body h1 {
+    font-size: 4.498rem;
+  }
+  .markdown-body .h2,
+  .markdown-body h2 {
+    font-size: 2.29rem;
+  }
+  .markdown-body .h3,
+  .markdown-body h3 {
+    font-size: 1.9rem;
+  }
+  .markdown-body .h4,
+  .markdown-body h4 {
+    font-size: 1.591rem;
+  }
+  .markdown-body #write > h4.md-focus:before {
+    top: 4px;
+  }
+}
+.markdown-body a {
+  color: #463f5c;
+  text-decoration: underline;
+}
+
+.markdown-body #write {
+  padding-top: 2rem;
+}
+
+.markdown-body #write pre.md-meta-block {
+  min-height: 35px;
+  padding: 0.5em 1em;
+  white-space: pre;
+  border: 0px;
+
+  border-left: 30px #f8f8f8 solid;
+  border-right: 30px #f8f8f8 solid;
+  width: 100vw;
+  max-width: calc(100% + 60px);
+
+  margin-left: -30px;
+  margin-bottom: 2em;
+  margin-top: -2010px;
+  padding-top: 2000px;
+  padding-bottom: 10px;
+  line-height: 1.5em;
+  color: #7a7a7a;
+  background-color: #fafafa;
+  font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
+  font-weight: 300;
+  clear: both;
+  padding-left: 0;
+  font-size: 1.125rem;
+}
+.markdown-body .md-image > .md-meta {
+  color: #463f5c;
+}
+.markdown-body .footnotes {
+  font-size: 1.1rem;
+}
+.markdown-body .md-tag {
+  font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
+}
+.markdown-body .code-tooltip {
+  background: white;
+}
+.markdown-body .code-tooltip-content {
+  font-size: 1.1rem;
+}
+
+.markdown-body .task-list {
+  padding-left: 0;
+}
+
+.markdown-body .md-task-list-item {
+  padding-left: 34px;
+}
+
+.markdown-body .md-task-list-item > input {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+  -webkit-appearance: initial;
+  top: -0.2rem;
+  margin-left: -1.6em;
+  margin-top: calc(1rem - 7px);
+  border: none;
+}
+
+.markdown-body .md-task-list-item > input:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.markdown-body .md-task-list-item > input:before {
+  border: 1px solid #555;
+  border-radius: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: #fff;
+  content: ' ';
+  transition: background-color 200ms ease-in-out;
+  display: block;
+}
+
+.markdown-body .md-task-list-item > input:checked:before,
+.markdown-body .md-task-list-item > input[checked]:before {
+  background: #333;
+  border-width: 2px;
+  display: inline-block;
+  transition: background-color 200ms ease-in-out;
+}
+
+.markdown-body .md-task-list-item > input:checked:after,
+.markdown-body .md-task-list-item > input[checked]:after {
+  opacity: 1;
+}
+
+.markdown-body .md-task-list-item > input:after {
+  opacity: 1;
+  -webkit-transition: opacity 0.05s ease-in-out;
+  -moz-transition: opacity 0.05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  position: absolute;
+  top: 0.4375rem;
+  left: 0.28125rem;
+  width: 0.9375rem;
+  height: 0.5rem;
+  border: 3px solid #fff;
+  border-top: 0;
+  border-right: 0;
+  content: ' ';
+  opacity: 0;
+}
+
+.markdown-body .md-tag {
+  color: inherit;
+}
+
+.markdown-body .md-toc:focus .md-toc-content {
+  margin-top: 19px;
+}
+
+.markdown-body #typora-sidebar {
+  font-size: 1rem !important;
+}
+
+.markdown-body .html-for-mac #typora-sidebar {
+  background-color: white;
+}
+
+.markdown-body .outline-content li,
+.markdown-body .outline-content ul {
+  font-size: 1rem !important;
+}
+
+.markdown-body .outline-title {
+  line-height: inherit;
+  margin-top: 10px;
+}
+
+.markdown-body .outline-expander {
+  width: 18px;
+}
+
+.markdown-body .outline-expander:before {
+  content: '+';
+  font-family: inherit;
+  color: rgb(108, 108, 108);
+  font-size: 1.5rem;
+  top: -0.1rem;
+}
+
+.markdown-body .outline-expander:hover:before {
+  content: '+';
+}
+
+.markdown-body .outline-item-open > .outline-item > .outline-expander:before {
+  content: '-';
+}
+
+/** source code mode */
+.markdown-body #typora-source {
+  font-family: Courier, monospace;
+  color: #6a6a6a;
+}
+
+.markdown-body .os-windows #typora-source {
+  font-family: inherit;
+}
+
+.markdown-body .cm-s-typora-default .cm-header,
+.markdown-body .cm-s-typora-default .cm-property,
+.markdown-body .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
+  color: #428bca;
+}
+
+.markdown-body .cm-s-typora-default .cm-atom,
+.markdown-body .cm-s-typora-default .cm-number {
+  color: #777777;
+}
+
+.markdown-body .md-diagram-panel {
+  margin-top: 24px;
+  margin-left: -1.2em;
+}
+
+.markdown-body .md-mathjax-midline {
+  background: #fafafa;
+}
+
+.markdown-body .enable-diagrams pre.md-fences[lang='sequence'] .code-tooltip,
+.markdown-body .enable-diagrams pre.md-fences[lang='flow'] .code-tooltip,
+.markdown-body .enable-diagrams pre.md-fences[lang='mermaid'] .code-tooltip {
+  bottom: -3.4em;
+}
+
+.markdown-body .dropdown-menu .divider {
+  border-color: #e5e5e5;
+}
+
+.markdown-body li {
+  margin: 0.5rem 0;
+}
+
+.markdown-body li > *:last-child {
+  margin-bottom: 0;
+}
diff --git a/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-300.woff b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-300.woff
new file mode 100644
index 0000000..ab45ab7
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-300.woff differ
diff --git a/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-300italic.woff b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-300italic.woff
new file mode 100644
index 0000000..0287996
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-300italic.woff differ
diff --git a/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-900.woff b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-900.woff
new file mode 100644
index 0000000..6f251d9
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-900.woff differ
diff --git a/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-900italic.woff b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-900italic.woff
new file mode 100644
index 0000000..6922b8f
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/lato-v14-latin-900italic.woff differ
diff --git a/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-300.woff b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-300.woff
new file mode 100644
index 0000000..bd499f2
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-300.woff differ
diff --git a/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-300italic.woff b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-300italic.woff
new file mode 100644
index 0000000..e7d5209
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-300italic.woff differ
diff --git a/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-700.woff b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-700.woff
new file mode 100644
index 0000000..54fd386
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-700.woff differ
diff --git a/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-700italic.woff b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-700italic.woff
new file mode 100644
index 0000000..a390989
Binary files /dev/null and b/deepsearcher/templates/static/themes/pixyll/merriweather-v19-latin-700italic.woff differ
diff --git a/deepsearcher/templates/static/themes/whitey.css b/deepsearcher/templates/static/themes/whitey.css
new file mode 100644
index 0000000..6320bdb
--- /dev/null
+++ b/deepsearcher/templates/static/themes/whitey.css
@@ -0,0 +1,297 @@
+.markdown-body {
+  font-size: 19px;
+  margin: auto;
+  background: #fefefe;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Vollkorn', Palatino, Times;
+  color: #333;
+  line-height: 1.4;
+  text-align: justify;
+  padding: 30px;
+}
+
+.markdown-body #write {
+  max-width: 960px;
+  margin: 0 auto;
+  margin-bottom: 2em;
+  line-height: 1.53;
+  padding-top: 40px;
+}
+
+@media only screen and (min-width: 1400px) {
+  .markdown-body #write {
+    max-width: 1100px;
+  }
+}
+
+@media print {
+  .markdown-body html {
+    font-size: 13px;
+  }
+}
+
+/* Typography
+-------------------------------------------------------- */
+
+.markdown-body #write > h1:first-child,
+.markdown-body h1 {
+  margin-top: 1.6em;
+  font-weight: normal;
+}
+
+.markdown-body h1 {
+  font-size: 3em;
+}
+
+.markdown-body h2 {
+  margin-top: 2em;
+  font-weight: normal;
+}
+
+.markdown-body h3 {
+  font-weight: normal;
+  font-style: italic;
+  margin-top: 3em;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3 {
+  text-align: center;
+}
+
+.markdown-body h2:after {
+  border-bottom: 1px solid #2f2f2f;
+  content: '';
+  width: 100px;
+  display: block;
+  margin: 0 auto;
+  height: 1px;
+}
+
+.markdown-body h1 + h2,
+.markdown-body h2 + h3 {
+  margin-top: 0.83em;
+}
+
+.markdown-body p,
+.markdown-body .mathjax-block {
+  margin-top: 0;
+  -webkit-hypens: auto;
+  -moz-hypens: auto;
+  hyphens: auto;
+}
+.markdown-body ul {
+  list-style: square;
+  padding-left: 1.2em;
+}
+.markdown-body ol {
+  padding-left: 1.2em;
+}
+
+@media print {
+  .markdown-body ol {
+    padding-left: 40px;
+  }
+}
+
+.markdown-body blockquote {
+  margin-left: 1em;
+  padding-left: 1em;
+  border-left: 1px solid #ddd;
+}
+.markdown-body code,
+.markdown-body pre {
+  font-family: 'Consolas', 'Menlo', 'Monaco', monospace, serif;
+  font-size: 0.9em;
+  background: white;
+}
+.markdown-body .md-fences {
+  margin-left: 1em;
+  padding-left: 1em;
+  border: 1px solid #ddd;
+  padding-bottom: 8px;
+  padding-top: 6px;
+  margin-bottom: 1.5em;
+}
+
+.markdown-body a {
+  color: #2484c1;
+  text-decoration: none;
+}
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+.markdown-body a img {
+  border: none;
+}
+.markdown-body h1 a,
+.markdown-body h1 a:hover {
+  color: #333;
+  text-decoration: none;
+}
+.markdown-body hr {
+  color: #ddd;
+  height: 1px;
+  margin: 2em 0;
+  border-top: solid 1px #ddd;
+  border-bottom: none;
+  border-left: 0;
+  border-right: 0;
+}
+.markdown-body .ty-table-edit {
+  background: #ededed;
+  padding-top: 4px;
+}
+.markdown-body table {
+  margin-bottom: 1.333333rem;
+}
+.markdown-body table th,
+.markdown-body table td {
+  padding: 8px;
+  line-height: 1.333333rem;
+  vertical-align: top;
+  border-top: 1px solid #ddd;
+}
+.markdown-body table th {
+  font-weight: bold;
+}
+.markdown-body table thead th {
+  vertical-align: bottom;
+}
+.markdown-body table caption + thead tr:first-child th,
+.markdown-body table caption + thead tr:first-child td,
+.markdown-body table colgroup + thead tr:first-child th,
+.markdown-body table colgroup + thead tr:first-child td,
+.markdown-body table thead:first-child tr:first-child th,
+.markdown-body table thead:first-child tr:first-child td {
+  border-top: 0;
+}
+.markdown-body table tbody + tbody {
+  border-top: 2px solid #ddd;
+}
+
+.markdown-body .task-list {
+  padding: 0;
+}
+
+.markdown-body .md-task-list-item {
+  padding-left: 1.6rem;
+}
+
+.markdown-body .md-task-list-item > input:before {
+  content: '\221A';
+  display: inline-block;
+  width: 1.33333333rem;
+  height: 1.6rem;
+  vertical-align: middle;
+  text-align: center;
+  color: #ddd;
+  background-color: #fefefe;
+}
+
+.markdown-body .md-task-list-item > input:checked:before,
+.markdown-body .md-task-list-item > input[checked]:before {
+  color: inherit;
+}
+.markdown-body .md-tag {
+  color: inherit;
+  font: inherit;
+}
+.markdown-body #write pre.md-meta-block {
+  min-height: 35px;
+  padding: 0.5em 1em;
+}
+.markdown-body #write pre.md-meta-block {
+  white-space: pre;
+  background: #f8f8f8;
+  border: 0px;
+  color: #999;
+
+  width: 100vw;
+  max-width: calc(100% + 60px);
+  margin-left: -30px;
+  border-left: 30px #f8f8f8 solid;
+  border-right: 30px #f8f8f8 solid;
+
+  margin-bottom: 2em;
+  margin-top: -1.3333333333333rem;
+  padding-top: 26px;
+  padding-bottom: 10px;
+  line-height: 1.8em;
+  font-size: 0.9em;
+  font-size: 0.76em;
+  padding-left: 0;
+}
+.markdown-body .md-img-error.md-image > .md-meta {
+  vertical-align: bottom;
+}
+.markdown-body #write > h5.md-focus:before {
+  top: 2px;
+}
+
+.markdown-body .md-toc {
+  margin-top: 40px;
+}
+
+.markdown-body .md-toc-content {
+  padding-bottom: 20px;
+}
+
+.markdown-body .outline-expander:before {
+  color: inherit;
+  font-size: 14px;
+  top: auto;
+  content: '\f0da';
+  font-family: FontAwesome;
+}
+
+.markdown-body .outline-expander:hover:before,
+.markdown-body .outline-item-open > .outline-item > .outline-expander:before {
+  content: '\f0d7';
+}
+
+/** source code mode */
+.markdown-body #typora-source {
+  font-family: Courier, monospace;
+  color: #6a6a6a;
+}
+
+.markdown-body .html-for-mac #typora-sidebar {
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.markdown-body .cm-s-typora-default .cm-header,
+.markdown-body .cm-s-typora-default .cm-property,
+.markdown-body .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
+  color: #428bca;
+}
+
+.markdown-body .cm-s-typora-default .cm-atom,
+.markdown-body .cm-s-typora-default .cm-number {
+  color: #777777;
+}
+
+.markdown-body .typora-node .file-list-item-parent-loc,
+.markdown-body .typora-node .file-list-item-time,
+.markdown-body .typora-node .file-list-item-summary {
+  font-family: arial, sans-serif;
+}
+
+.markdown-body .md-task-list-item > input {
+  margin-left: -1.3em;
+  margin-top: calc(1rem - 12px);
+}
+
+.markdown-body .md-mathjax-midline {
+  background: #fafafa;
+}
+
+.markdown-body .md-fences .code-tooltip {
+  bottom: -2em !important;
+}
+
+.markdown-body .dropdown-menu .divider {
+  border-color: #e5e5e5;
+}
