import React from 'react';
import './welcome.scss';
import ideLogo from '../codeReview/ideLogo.svg';


function Welcome() {
  return (<div className='welcome'>
    <div className='text-center'>
      <img className='welcome-logo' src={ideLogo} />
    </div> 
    <h1>WebIDE功能特性</h1>
    <div className="break_word_comments imageLayerParent markdown-body">
      <h3 id="h3-1-"><a className="reference-link" name="1. 语言服务"></a><span className="header-link octicon octicon-link"></span>1. 语言服务</h3>
      <p>● 支持近 40 种语言的语法高亮<br />● 支持 JavaScript/TypeScript、HTML、CSS、JSON、Markdown 的基于 LSP (Language Server Protocol) 语言特性功能，具备智能提示和大纲信息以及单文件内跳转。<br/>● 支持 Java、Go、Python、C++、Php 的基于 Tree Sitter 的在线语言服务能力，提供查看引用、符号搜索等特性</p>
      <h3 id="h3-2-"><a className="reference-link" name="2. 分支"></a><span className="header-link octicon octicon-link"></span>2. 分支</h3><p>支持分支切换：点击左下角分支名即可切换分支。</p>
      <h3 id="h3-3-"><a className="reference-link" name="3. 搜索"></a><span className="header-link octicon octicon-link"></span>3. 搜索</h3><p>当前支持 Gitlink 仓库内代码搜索（支持单词匹配和文件过滤）和文件搜索。</p>
      <h3 id="h3-4-"><a className="reference-link" name="4. 行高亮"></a><span className="header-link octicon octicon-link"></span>4. 行高亮</h3><p>支持单行或多行高亮，点击行号即可高亮行，按住 <strong>Shift</strong> 可选中连续多行。</p>
      <h3 id="h3-5-blame"><a className="reference-link" name="5. Blame"></a><span className="header-link octicon octicon-link"></span>5. Blame</h3><p>支持查看单行 blame 信息，hover 后可展示详细信息。</p>
      <h3 id="h3-6-graph"><a className="reference-link" name="6. Graph"></a><span className="header-link octicon octicon-link"></span>6. Graph</h3><p>支持 graph 视图，可查看分支 commits 历史以及每个 commit 详细文件变更，并支持文件 diff 查看。底部状态栏左下角点击 Git Graph 或在命令面板输入 View Git Graph，即可打开 Git Graph 视图。</p>
      <h3 id="h3-7-webscm"><a className="reference-link" name="7. WebSCM"></a><span className="header-link octicon octicon-link"></span>7. WebSCM</h3><p>可以在极速版新建分支，修改代码后在 SCM 面板看到变更文件列表，写完 commit message 后提交到 Gitlink 上。如果想快速修改一些文件可以不用在本地修改，直接通过极速版修改代码一次性提</p>
      <h3 id="h3-8-"><a className="reference-link" name="8. 代码在线运行"></a><span className="header-link octicon octicon-link"></span>8. 代码在线运行</h3><p>● 集成了基于 skypack 的更加轻量的 <a className="link" href="https://marketplace.visualstudio.com/items?itemName=codespaces-Contrib.codeswing" target="_blank" rel="noopener"><ne-text id="u668cf4f4">CodeSwing</ne-text></a> 插件，可以在极速版去运行前端代码。<br/>
      ● 集成了基于  <a className="link" href="https://pyodide.org/en/latest/usage/packages-in-pyodide.html" target="_blank" rel="noopener"><ne-text id="u2caa2beb">Pyodide</ne-text></a> 的 <a className="link" href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner-for-web" target="_blank" rel="noopener"><ne-text id="ufb2dbccf">Code-Runner-For-Web</ne-text></a> 插件，可以将 Python 的运行搬到浏览器上。</p>
    </div>
  </div>)
}

export default Welcome;