feat: add docs/canvas.md ad2fd7b642

docs/github-copilot.html

@@ -154,15 +154,16 @@
 
 
 
-<table><thead><tr><th>名称</th><th>描述</th></tr></thead><tbody><tr><td>Inline Suggestions</td><td>在编辑器中紧邻光标所在位置显示建议</td></tr><tr><td>Completions Panel</td><td>在编辑器中展示完整的建议列表</td></tr><tr><td>Inline Chat</td><td>在编辑器中紧邻光标所在位置发起对话</td></tr><tr><td>Editor Chat</td><td>在编辑器中打开完整的对话界面</td></tr><tr><td>Silde Chat</td><td>在编辑器的侧边栏打开对话界面</td></tr><tr><td>Quick Chat</td><td>在顶部唤起对话界面</td></tr></tbody></table>
+<table class="left-align"><thead><tr><th>名称</th><th>描述</th></tr></thead><tbody><tr><td><code>Inline Suggestions</code></td><td>在编辑器中紧邻光标所在位置显示建议</td></tr><tr><td><code>Completions Panel</code></td><td>在编辑器中展示完整的建议列表</td></tr><tr><td><code>Inline Chat</code></td><td>在编辑器中紧邻光标所在位置发起对话</td></tr><tr><td><code>Editor Chat</code></td><td>在编辑器中打开完整的对话界面</td></tr><tr><td><code>Silde Chat</code></td><td>在编辑器的侧边栏打开对话界面</td></tr><tr><td><code>Quick Chat</code></td><td>在顶部唤起对话界面</td></tr></tbody></table>
+<!--rehype:className=left-align-->
 </div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="提示技巧"><a aria-hidden="true" tabindex="-1" href="#提示技巧"><span class="icon icon-link"></span></a>提示技巧</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist col-span-1 row-span-1"><div class="wrap-header h3wrap"><h3 id="提示之禅"><a aria-hidden="true" tabindex="-1" href="#提示之禅"><span class="icon icon-link"></span></a>提示之禅</h3><div class="wrap-body">
 <!--rehype:wrap-class=col-span-1 row-span-1-->
-<blockquote>
-<p>你与 <code>copilot</code> 之间的关系，就是作家和插画师的关系。<br>
-你只有尽可能的全面、干练、清晰的描述你的故事(即 <code>上下文</code>)。<br>
-<code>copilot</code> 才能根据你的故事画出精美的插画 (即 <code>代码</code> )。</p>
-</blockquote>
+<ul class="style-round">
+<li>你的关系与 <code>copilot</code> 的关系，就像作家与插画师的关系。</li>
+<li>为了让 <code>copilot</code> 能够绘制出精美的插画（即代码），你需要尽可能全面、干练、清晰地描述你的故事（即上下文）。</li>
+</ul>
+<!--rehype:className=style-round-->
 </div></div></div><div class="wrap h3body-not-exist col-span-1 row-span-1"><div class="wrap-header h3wrap"><h3 id="提示技巧-1"><a aria-hidden="true" tabindex="-1" href="#提示技巧-1"><span class="icon icon-link"></span></a>提示技巧</h3><div class="wrap-body">
 <!--rehype:wrap-class=col-span-1 row-span-1-->
 <ul>
@@ -171,9 +172,9 @@
 </ul>
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="实战教程"><a aria-hidden="true" tabindex="-1" href="#实战教程"><span class="icon icon-link"></span></a>实战教程</h3><div class="wrap-body">
 <ul>
-<li><a href="https://www.youtube.com/playlist?list=PLj6YeMhvp2S5_hvBl2SE-7YCHYlLQ0bPt">Youtube GitHub Copilot Series</a></li>
-<li><a href="https://www.youtube.com/watch?v=CwAzIpc4AnA">Pragmatic techniques to get the most out of GitHub Copilot</a></li>
-<li><a href="https://github.blog/2023-05-12-how-i-used-github-copilot-to-build-a-browser-extension/">How I used GitHub Copilot to build a browser extension</a></li>
+<li><a href="https://www.youtube.com/playlist?list=PLj6YeMhvp2S5_hvBl2SE-7YCHYlLQ0bPt">Youtube GitHub Copilot 系列</a></li>
+<li><a href="https://www.youtube.com/watch?v=CwAzIpc4AnA">实用技巧：充分利用 GitHub Copilot</a></li>
+<li><a href="https://github.blog/2023-05-12-how-i-used-github-copilot-to-build-a-browser-extension/">我如何使用 GitHub Copilot 构建浏览器扩展</a></li>
 </ul>
 </div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-1"><div class="wrap-header h3wrap"><h3 id="上下文信息的种类"><a aria-hidden="true" tabindex="-1" href="#上下文信息的种类"><span class="icon icon-link"></span></a>上下文信息的种类</h3><div class="wrap-body">
 <!--rehype:wrap-class=col-span-2 row-span-1-->
@@ -205,17 +206,13 @@
 <table class="show-header left-align"><thead><tr><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>文件</td><td>Copilot会查看编辑器中当前和紧邻打开的文件。</td></tr><tr><td>注释</td><td>Copilot会根据紧邻的注释，为你的代码提供帮助和建议。如 docstring, 块注释, 行注释之类。</td></tr><tr><td>命名</td><td>良好的命名能帮助Copilot更好地理解你的代码，如函数名, 变量名, 文件名等</td></tr><tr><td>代码</td><td>Copilot会查看你的代码和它附近的代码，以生成帮助你的建议。</td></tr></tbody></table>
 <!--rehype:className=show-header left-align-->
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="上下文文件"><a aria-hidden="true" tabindex="-1" href="#上下文文件"><span class="icon icon-link"></span></a>上下文：文件</h3><div class="wrap-body">
-<blockquote>
 <p>Copilot会查看编辑器中当前和紧邻打开的文件，以分析上下文并提供适当的建议。</p>
-</blockquote>
 <hr>
-<blockquote>
 <ul>
 <li>1、避免打开过多的文件，以便Copilot能够更好地理解你的代码。</li>
 <li>2、打开的文件尽量相关且有共性。</li>
 <li>3、如果是新项目，可以打开一些模版代码、数据文件以及参考文档等相关示例文件。以便Copilot能够更好地理解你的期望。等已经开发了一些代码后，这些示例文件就可以删除了。</li>
 </ul>
-</blockquote>
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="上下文-注释-顶部注释"><a aria-hidden="true" tabindex="-1" href="#上下文-注释-顶部注释"><span class="icon icon-link"></span></a>上下文: 注释: 顶部注释</h3><div class="wrap-body">
 <p>创建一个新文件时，在文件顶部添加注释，描述你的需求。这对 Copilot 很有帮助。</p>
 <p>* 下面说明将使用<code>...</code>表示copilot开始生成的位置</p>