# tech-training-camp-frontend

**Repository Path**: adkun/tech-training-camp-frontend

## Basic Information

- **Project Name**: tech-training-camp-frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-17
- **Last Updated**: 2021-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

MdTree.java算法正在重构，未完成

可暂用原代码MarkdownParser.java

# 项目预览地址（随时删除）

已删除

# 项目目录结构

1. `frontend`

    项目前端文件

2. `markdown-0.0.1-SNAPSHOT.jar`

    项目后端服务器jar包

3. `src/main/`

    后端代码

# 项目运行须知

1. 后端服务启动

    确保计算机安装有JRE 1.8以上版本。

    命令行到项目目录：

    ```shell
    java -jar markdown-0.0.1-SNAPSHOT.jar
    ```

2. 前端启动

    页面`frontend/markdown.html`

    由于前后端分离带来的跨域问题，后端指定了`127.0.0.1:5500`和`127.0.0.1:5501`可访问接口。

    本人使用的是VSCode的`Live Server`插件`Open with Live Server`，

    以使前端页面在127.0.0.1:5500地址运行。

    > 如有使用其它端口运行前端页面的需求，
    >
    > 自行修改`src/main/resources/application.yml`
    >
    > 修改
    >
    > ```yaml
    > adkun:
    > 	web:
    > 		path: # 你的服务器地址
    > ```



# 项目代码结构

1. HTML页面构成

    1. 上方快速操作工具栏（参考吴一鸣同学的代码）
    2. 左边是textarea输入区域，右边是渲染效果区域。

2. CSS样式表

    - `github.css`

        github风格的CSS文件

    - `global.css`

        页面主体CSS

3. 后端

    - `MarkdownParser`

        负责将Markdown文本转化为抽象语法树，并处理为html页面。

    - `MdController`

        与前端的接口，本地运行接口地址`http://127.0.0.1/parse`





# Markdown解析器功能

- 有序列表
- 无序列表
- 引用块
- 代码块
- 有序列表、无序列表、引用块的嵌套
- 缩进（4个空格）
- 粗体
- 斜体
- 图片
- 链接
- 删除线
- 分隔线



# 演示

## 标题

![image-20210317224506256](https://gitee.com/adkun/pic-go/raw/master/img//image-20210317224506256.png)



## 列表

![image-20210317224544322](https://gitee.com/adkun/pic-go/raw/master/img//image-20210317224544322.png)

## 引用

![image-20210317224609027](https://gitee.com/adkun/pic-go/raw/master/img//image-20210317224609027.png)

## 代码块

![image-20210317230128372](https://gitee.com/adkun/pic-go/raw/master/img//image-20210317230128372.png)

## 嵌套

![image-20210317231313975](https://gitee.com/adkun/pic-go/raw/master/img//image-20210317231313975.png)

## 缩进

![image-20210317231406871](https://gitee.com/adkun/pic-go/raw/master/img//image-20210317231406871.png)