增加替换按钮

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="shortcut icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>前端开发预览网站</title>
+    <title>前端开发学习平台</title>
     <link rel="stylesheet" href="/style.css" />
     <script>
       window.localStorage.setItem("maxkbMaskTip", true)

public/turtorial/01/README.md

@@ -1,30 +1,59 @@
-# 测试
+# HTML 基本标签
 
-## 什么是 HTML
+## 标题
+
+h1到h6，一共六级标题。
 
 ```html
-<div>hello</div>
+<h1>标题 1</h1>
+<h2>标题 2</h2>
+<h3>标题 3</h3>
+<h4>标题 4</h4>
+<h5>标题 5</h5>
+<h6>标题 6</h6>
 ```
 
+给六个标题字体颜色换一下，注意：`color` 表示字体颜色。
+
 ```css
-.welcome {
+h1 {
   color: red;
 }
-```
+
-```js
+h2 {
-console.log("122")
+  color: orange;
+}
+
+h3 {
+  color: yellow;
+}
+
+h4 {
+  color: green;
+}
+
+h5 {
+  color: blue;
+}
+
+h6 {
+  color: purple;
+}
 ```
 
-## 什么是 HTML
+## 段落
 
-## 什么是 HTML
+`<p></p>`表示段落
 
-## 什么是 HTML
+```html
+<p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。</p>
+```
 
-## 什么是 HTML
+用`font-size`改变字体大小，`line-height`改变行高。注意单位是 px（像素）
 
-## 什么是 HTML
+```css
-
+p {
-## 什么是 HTML
+  font-size: 24px;
-
+  line-height: 48px;
-## 什么是 HTML
+}
+```

public/turtorial/02/README.md

@@ -1,7 +1 @@
-# 什么是 CSS
+未完待续...
-
-```css
-.greeting {
-    color: red;
-}
-```

public/turtorial/03/README.md

@@ -0,0 +1 @@
+全部结束

src/components/Editor.vue

@@ -45,7 +45,7 @@ const lang = computed(() => {
   <Codemirror
     v-model="code"
     indentWithTab
-    :extensions="[styleTheme, lang, githubLight]"
+    :extensions="[EditorView.lineWrapping, styleTheme, lang, githubLight]"
     :tabSize="4"
     :style="{ height: '100%', fontSize: props.fontSize + 'px' }"
   />

src/components/Editors.vue

@@ -66,6 +66,11 @@
         </n-flex>
       </n-flex>
     </n-tab-pane>
+    <template #suffix>
+      <n-flex class="suffix">
+        <!-- <n-button>登录</n-button> -->
+      </n-flex>
+    </template>
   </n-tabs>
 </template>
 <script lang="ts" setup>
@@ -94,4 +99,8 @@ function changeSize(num: number) {
 .label {
   font-size: 16px;
 }
+
+.suffix {
+  margin-right: 20px;
+}
 </style>

src/components/Tutorial.vue

@@ -40,39 +40,36 @@ function next() {
 async function getContent() {
   const res = await fetch(`/turtorial/${step.value}/README.md`)
   const data = await res.text()
-  if (!!data) {
+  content.value = await marked.parse(data, { async: true })
-    content.value = await marked.parse(data, { async: true })
+  last.value = data == "全部结束"
-    last.value = false
-  } else {
-    content.value = ""
-    last.value = true
-  }
 }
 
 // 用 js 来写的，可以换成 vue 的方式
-function addCopyButton() {
+function addButton() {
-  const div = document.createElement("div")
+  const action = document.createElement("div")
-  div.className = "my-action-btn"
+  action.className = "codeblock-action"
   const pres = $content.value!.querySelectorAll("pre")
   pres.forEach((pre) => {
     let timer = 0
-    const copy = div.cloneNode(true) as HTMLDivElement
+    const copy = action.cloneNode() as HTMLDivElement
-    pre.appendChild(copy)
+    pre.insertBefore(copy, pre.children[0])
-    copy.onclick = () => {
+    const code = pre.childNodes[1] as HTMLPreElement
-      // 功能
+    const match = code.className.match(/-(.*)/)
-      const outer = pre.childNodes[0] as HTMLPreElement
+    let lang = "html"
-      const match = outer.className.match(/-(.*)/)
+    if (match) lang = match[1].toLowerCase()
-      let lang = "html"
+    copy.innerHTML = `<span class="lang">${lang}</span><div class="btn">替换<div>`
-      if (match) lang = match[1].toLowerCase()
+    const btn = copy.children[1] as HTMLDivElement
+    btn.onclick = () => {
       tab.value = lang
-      if (lang === "html") html.value = pre.textContent
+      const content = pre.children[1].textContent
-      if (lang === "css") css.value = pre.textContent
+      if (lang === "html") html.value = content
-      if (lang === "js") js.value = pre.textContent
+      if (lang === "css") css.value = content
+      if (lang === "js") js.value = content
       // 样式
-      copy.classList.add("click")
+      btn.innerHTML = "已替换"
       clearTimeout(timer)
       timer = setTimeout(() => {
-        copy.classList.remove("click")
+        btn.innerHTML = "替换"
       }, 1000)
     }
   })
@@ -80,7 +77,7 @@ function addCopyButton() {
 
 async function render() {
   await getContent()
-  addCopyButton()
+  addButton()
 }
 
 onMounted(render)
@@ -116,13 +113,11 @@ watch(step, render)
   position: relative;
 }
 
-.my-action-btn {
+.markdown-body pre code {
-  position: absolute;
+  text-wrap: auto;
-  top: 0;
+}
-  right: 0;
+
-  padding: 1rem;
+.codeblock-action {
-  cursor: pointer;
-  border-radius: 0.4rem;
   font-family:
     v-sans,
     system-ui,
@@ -135,11 +130,16 @@ watch(step, render)
     "Segoe UI Symbol";
 }
 
-.my-action-btn::before {
+.codeblock-action .lang {
-  content: "替换";
+  font-size: 1.2rem;
 }
 
-.my-action-btn.click::before {
+.codeblock-action .btn {
-  content: "已替换";
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  cursor: pointer;
+  border-radius: 0.4rem;
 }
 </style>