diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.ts b/src/app/presentation/ledge-helper/ledge-helper.component.ts
index f1574553..af3efb89 100644
--- a/src/app/presentation/ledge-helper/ledge-helper.component.ts
+++ b/src/app/presentation/ledge-helper/ledge-helper.component.ts
@@ -9,6 +9,26 @@ export class LedgeHelperComponent implements OnInit {
   content = `
 # Syntax Test
 
+\`\`\`list-style
+ - 开源工具采用
+ - 商业采购
+ - 自研研发交通平台
+
+config: {"type": "circle"}
+\`\`\`
+
+\`\`\`list-style
+ - 基于开源方案遇到困难
+   - 性能瓶颈
+   - 业务需求⽇益多元化，但团队规模有限
+ - 扩展更多的能力
+   - 更多元化的代码质量检查
+   - 审计需求
+   - 二进制、镜像安全扫描
+
+config: {"type": "group-square"}
+\`\`\`
+
 \`\`\`echarts
 {
 "series": [
diff --git a/src/app/shared/ledge-render/ledge-render.component.html b/src/app/shared/ledge-render/ledge-render.component.html
index 4cc26cf2..68fb0768 100644
--- a/src/app/shared/ledge-render/ledge-render.component.html
+++ b/src/app/shared/ledge-render/ledge-render.component.html
@@ -80,6 +80,14 @@
       </div>
     </div>
 
+    <div *ngSwitchCase="'list-style'">
+      <div class="list-style list-style-{{item.config.type}}">
+        <div *ngFor="let listItem of item.data;let index = index;" class="list-style-item item-{{index}}">
+          {{listItem.name}}
+        </div>
+      </div>
+    </div>
+
     <div *ngSwitchCase="'heading'">
       <h1 *ngIf="item.depth === 1">{{item.text}}</h1>
       <h2 *ngIf="item.depth === 2">{{item.text}}</h2>
diff --git a/src/app/shared/ledge-render/ledge-render.component.ts b/src/app/shared/ledge-render/ledge-render.component.ts
index 8c2c190b..271c9d59 100644
--- a/src/app/shared/ledge-render/ledge-render.component.ts
+++ b/src/app/shared/ledge-render/ledge-render.component.ts
@@ -126,6 +126,15 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
       case 'echarts':
         this.markdownData.push({ type: 'echarts', data: codeBlock.text });
         break;
+      case 'list-style':
+        const listData = LedgeMarkdownConverter.toJson(codeBlock.text);
+        console.log(listData.lists);
+        this.markdownData.push({
+          type: 'list-style',
+          data: listData.lists[0].children,
+          config: listData.config,
+        });
+        break;
       default:
         this.markdownData.push(token);
         break;
diff --git a/src/styles/mdstyles/_list-style.scss b/src/styles/mdstyles/_list-style.scss
index 1956a8d0..4a8269ea 100644
--- a/src/styles/mdstyles/_list-style.scss
+++ b/src/styles/mdstyles/_list-style.scss
@@ -7,9 +7,10 @@
     text-align: center;
 
     .list-style-item {
-      &.item-1 {background: #A1763A;}
-      &.item-2 {background: #1c4c78;}
-      &.item-3 {background: #994538;}
+      &.item-0 {background: #A1763A;}
+      &.item-1 {background: #1c4c78;}
+      &.item-2 {background: #994538;}
+      &.item-3 {background: red;}
 
       width: 200px;
       height: 200px;
@@ -25,9 +26,10 @@
     text-align: center;
 
     > .list-style-item {
-      &.item-1 {background: #A1763A;}
-      &.item-2 {background: #1c4c78;}
-      &.item-3 {background: #994538;}
+      &.item-0 {background: #A1763A;}
+      &.item-1 {background: #1c4c78;}
+      &.item-2 {background: #994538;}
+      &.item-3 {background: red;}
 
       width: 320px;
       height: 240px;