diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 6d6fe602935..887ece39d95 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -29,6 +29,8 @@
 ### Fixes
 
 - Fix `n-form`'s rules and `n-form-item`'s rule about `validator` and `asyncValidator`'s `rule` type is not `FormItemRule`, closes [#2299](https://github.com/TuSimple/naive-ui/issues/2299).
+- Fix `n-log` doesn't break line when line is too long, closes [#2298](https://github.com/TuSimple/naive-ui/issues/2298).
+- Fix `n-log` doesn't export `LogInst` type.
 
 ## 2.24.7 (2022-01-28)
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 55bd9a8bcab..24b92dbdbe4 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -29,6 +29,8 @@
 ### Fixes
 
 - 修复 `n-form` 的 rules 和 `n-form-item` 的 rule 中的 `validator` 与 `asyncValidator` 函数的 `rule` 类型不为 `FormItemRule` 类型， 关闭 [#2299](https://github.com/TuSimple/naive-ui/issues/2299)
+- 修复 `n-log` 在内容过长时不折行，关闭 [#2298](https://github.com/TuSimple/naive-ui/issues/2298)
+- 修复 `n-log` 未导出 `LogInst` 类型
 
 ## 2.24.7 (2022-01-28)
 
diff --git a/package.json b/package.json
index 196b86b5423..6a088b118e0 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "release-changelog": "node scripts/release-changelog",
     "build:site:ts": "./scripts/pre-build-site/pre-build-site.sh && cross-env TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
     "prepare": "husky install",
-    "transpile-docs": "node scripts/md-to-vue popover",
+    "transpile-docs": "node scripts/md-to-vue log",
     "typecheck": "vue-tsc --noEmit src/**/*.vue"
   },
   "author": "07akioni",
diff --git a/src/log/demos/enUS/auto-bottom.demo.md b/src/log/demos/enUS/auto-bottom.demo.vue
similarity index 63%
rename from src/log/demos/enUS/auto-bottom.demo.md
rename to src/log/demos/enUS/auto-bottom.demo.vue
index 8ed1108737b..a69379be25b 100644
--- a/src/log/demos/enUS/auto-bottom.demo.md
+++ b/src/log/demos/enUS/auto-bottom.demo.vue
@@ -1,19 +1,24 @@
+<markdown>
 # Scroll to latest
 
 Scroll to the latest when log is gradually increasing.
+</markdown>
 
-```html
-<n-space vertical>
-  <n-button @click="handleClick">Add Data</n-button>
-  <n-log ref="logInst" :log="log" language="naive-log" trim />
-</n-space>
-```
+<template>
+  <n-space vertical>
+    <n-button @click="handleClick">
+      Add Data
+    </n-button>
+    <n-log ref="logInst" :log="log" language="naive-log" trim />
+  </n-space>
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref, watchEffect, onMounted, nextTick } from 'vue'
+import { LogInst } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -23,13 +28,13 @@ function log () {
 export default defineComponent({
   setup () {
     const logRef = ref(log())
-    const logInstRef = ref(null)
+    const logInstRef = ref<LogInst | null>(null)
     const startRef = ref(false)
-    const timerRef = ref(null)
+    const timerRef = ref<number | null>(null)
     const handleClick = () => {
       startRef.value = !startRef.value
       if (startRef.value) {
-        timerRef.value = setInterval(() => {
+        timerRef.value = window.setInterval(() => {
           logRef.value = logRef.value + log()
         }, 1000)
       } else if (timerRef.value) {
@@ -41,7 +46,7 @@ export default defineComponent({
       watchEffect(() => {
         if (logRef.value) {
           nextTick(() => {
-            logInstRef.value.scrollTo({ position: 'bottom', slient: true })
+            logInstRef.value?.scrollTo({ position: 'bottom', slient: true })
           })
         }
       })
@@ -54,4 +59,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/enUS/debug.demo.md b/src/log/demos/enUS/debug.demo.md
deleted file mode 100644
index d06cdc90684..00000000000
--- a/src/log/demos/enUS/debug.demo.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Debug
-
-```html
-<n-card
-  title="Random String Logs"
-  :segmented="{
-  header: 'soft',
-  content: 'hard'
-}"
->
-  <n-log
-    style="margin-top: -12px; margin-bottom: -12px;"
-    :log="log"
-    @require-more="handleRequireMore"
-    :loading="loading"
-    trim
-  />
-  <template #action>
-    <n-button @click="clear">Clear</n-button>
-  </template>
-</n-card>
-```
-
-```js
-import { defineComponent, ref } from 'vue'
-
-function log () {
-  const l = []
-  for (let i = 0; i < 40; ++i) {
-    l.push(Math.random().toString(16))
-  }
-  return l.join('\n') + '\n'
-}
-
-export default defineComponent({
-  setup () {
-    const loadingRef = ref(false)
-    const logRef = ref(log())
-    return {
-      loading: loadingRef,
-      log: logRef,
-      clear () {
-        logRef.value = ''
-      },
-      handleRequireMore (from) {
-        if (loadingRef.value) return
-        loadingRef.value = true
-        setTimeout(() => {
-          if (from === 'top') {
-            logRef.value = log() + logRef.value
-          } else if (from === 'bottom') {
-            logRef.value = logRef.value + log()
-          }
-          loadingRef.value = false
-        }, 1000)
-      }
-    }
-  }
-})
-```
diff --git a/src/log/demos/enUS/event.demo.md b/src/log/demos/enUS/event.demo.vue
similarity index 83%
rename from src/log/demos/enUS/event.demo.md
rename to src/log/demos/enUS/event.demo.vue
index 7341a80bb42..a066f286521 100644
--- a/src/log/demos/enUS/event.demo.md
+++ b/src/log/demos/enUS/event.demo.vue
@@ -1,24 +1,26 @@
+<markdown>
 # Event
 
 Log has `require-more`, `reach-top` and `reach-bottom` event. Note that even if logs are scrolled to top or bottom, when you wheel to the same direction, `require-more` will still be triggered while `reach-xxx` will not. If you don't want to trigger handler when logs are at top or bottom. Use `reach-top` or `reach-bottom` instead.
+</markdown>
 
-```html
-<n-log
-  :log="log"
-  @require-more="handleRequireMore"
-  @reach-top="handleReachTop"
-  @reach-bottom="handleReachBottom"
-  :loading="loading"
-  trim
-/>
-```
+<template>
+  <n-log
+    :log="log"
+    :loading="loading"
+    trim
+    @require-more="handleRequireMore"
+    @reach-top="handleReachTop"
+    @reach-bottom="handleReachBottom"
+  />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useMessage } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 10; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -33,9 +35,6 @@ export default defineComponent({
     return {
       loading: false,
       log: log(),
-      clear () {
-        logRef.value = ''
-      },
       handleRequireMore (from) {
         message.info('Require More from ' + from)
         if (loadingRef.value) return
@@ -58,4 +57,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/enUS/highlight.demo.md b/src/log/demos/enUS/highlight.demo.vue
similarity index 78%
rename from src/log/demos/enUS/highlight.demo.md
rename to src/log/demos/enUS/highlight.demo.vue
index d52a7692a1d..2ee7f714021 100644
--- a/src/log/demos/enUS/highlight.demo.md
+++ b/src/log/demos/enUS/highlight.demo.vue
@@ -1,23 +1,25 @@
+<markdown>
 # Highlight
 
 Before you use highlight, see Note section of the page to make sure you won't miss messages that are important to make it work.
+</markdown>
 
-```html
-<n-log
-  :log="log"
-  @require-top="handlerequireTop"
-  @require-bottom="handlerequireBottom"
-  :loading="loading"
-  language="naive-log"
-  trim
-/>
-```
+<template>
+  <n-log
+    :log="log"
+    :loading="loading"
+    language="naive-log"
+    trim
+    @require-top="handlerequireTop"
+    @require-bottom="handlerequireBottom"
+  />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -32,9 +34,6 @@ export default defineComponent({
     return {
       loading: loadingRef,
       log: logRef,
-      clear () {
-        logRef.value = ''
-      },
       handlerequireTop () {
         if (loadingRef.value) return
         loadingRef.value = true
@@ -54,4 +53,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/enUS/index.demo-entry.md b/src/log/demos/enUS/index.demo-entry.md
index 0711849ae2d..3c1d0a12c7f 100644
--- a/src/log/demos/enUS/index.demo-entry.md
+++ b/src/log/demos/enUS/index.demo-entry.md
@@ -5,7 +5,7 @@
 If you have some logs to show, use log.
 
 <n-alert title="Note" type="warning" style="margin-bottom: 16px;">
-  Due to package size, Naive UI doesn't include highlight.js. If you want highlight logs, make sure you have set highlightjs before using it.
+  Due to package size.vue, Naive UI doesn't include highlight.vue.js. If you want highlight logs, make sure you have set highlightjs before using it.
 </n-alert>
 
 In highlight demo, we defined a language called `naive-log` which will highlight all the numbers of line. The following code shows how we defined it. If you want to know more about highlight.js, see <n-a href="https://highlightjs.org/" target="_blank">highlight.js</n-a> and <n-a href="https://highlightjs.readthedocs.io/en/latest/index.html" target="_blank">highlight.js developer documentation</n-a>
@@ -44,11 +44,11 @@ In highlight demo, we defined a language called `naive-log` which will highlight
 
 ```demo
 size
-event
-scroll
-highlight
-loading
-auto-bottom
+event.vue
+scroll.vue
+highlight.vue
+loading.vue
+auto-bottom.vue
 ```
 
 ## API
diff --git a/src/log/demos/enUS/loading.demo.md b/src/log/demos/enUS/loading.demo.vue
similarity index 62%
rename from src/log/demos/enUS/loading.demo.md
rename to src/log/demos/enUS/loading.demo.vue
index 5555886f7b8..0b68628cf18 100644
--- a/src/log/demos/enUS/loading.demo.md
+++ b/src/log/demos/enUS/loading.demo.vue
@@ -1,14 +1,16 @@
+<markdown>
 # Loading
+</markdown>
 
-```html
-<n-switch v-model:value="loading" /> <n-log :loading="loading" :log="log" />
-```
+<template>
+  <n-switch v-model:value="loading" /> <n-log :loading="loading" :log="log" />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -23,4 +25,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/enUS/scroll.demo.md b/src/log/demos/enUS/scroll.demo.vue
similarity index 51%
rename from src/log/demos/enUS/scroll.demo.md
rename to src/log/demos/enUS/scroll.demo.vue
index 31361b96ecb..a177d5c514f 100644
--- a/src/log/demos/enUS/scroll.demo.md
+++ b/src/log/demos/enUS/scroll.demo.vue
@@ -1,41 +1,41 @@
+<markdown>
 # Scroll
 
 You can easily make log scroll to top or bottom. Also you can make the scroll action silent (don't trigger events of Log in this scroll action).
-
-```html
-<n-space vertical>
-  <n-button-group>
-    <n-button @click="scrollTo({ position: 'bottom', slient: false })"
-      >Scroll To Bottom</n-button
-    >
-    <n-button @click="scrollTo({ position: 'bottom', slient: true })"
-      >Scroll To Bottom (silent)</n-button
-    >
-    <n-button @click="scrollTo({ position: 'top', slient: false })"
-      >Scroll To Top</n-button
-    >
-    <n-button @click="scrollTo({ position: 'top', slient: true })"
-      >Scroll To Top (silent)</n-button
-    >
-  </n-button-group>
-  <n-log
-    ref="logInstRef"
-    :log="log"
-    @require-more="handleRequireMore"
-    @reach-top="handleReachTop"
-    @reach-bottom="handleReachBottom"
-    :loading="loading"
-    trim
-  />
-</n-space>
-```
-
-```js
+</markdown>
+<template>
+  <n-space vertical>
+    <n-button-group>
+      <n-button @click="scrollTo({ position: 'bottom', slient: false })">
+        Scroll To Bottom
+      </n-button>
+      <n-button @click="scrollTo({ position: 'bottom', slient: true })">
+        Scroll To Bottom (silent)
+      </n-button>
+      <n-button @click="scrollTo({ position: 'top', slient: false })">
+        Scroll To Top
+      </n-button>
+      <n-button @click="scrollTo({ position: 'top', slient: true })">
+        Scroll To Top (silent)
+      </n-button>
+    </n-button-group>
+    <n-log
+      ref="logInstRef"
+      :log="log"
+      :loading="loading"
+      trim
+      @require-more="handleRequireMore"
+      @reach-top="handleReachTop"
+      @reach-bottom="handleReachBottom"
+    />
+  </n-space>
+</template>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-import { useMessage } from 'naive-ui'
+import { useMessage, LogInst } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 10; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -47,14 +47,11 @@ export default defineComponent({
     const message = useMessage()
     const loadingRef = ref(false)
     const logRef = ref(log())
-    const logInstRef = ref(null)
+    const logInstRef = ref<LogInst | null>(null)
     return {
       logInstRef,
       loading: false,
       log: log(),
-      clear () {
-        logRef.value = ''
-      },
       handleRequireMore (from) {
         message.info('Require More from ' + from)
         if (loadingRef.value) return
@@ -74,10 +71,10 @@ export default defineComponent({
       handleReachBottom () {
         message.info('Reach Bottom')
       },
-      scrollTo (...args) {
-        logInstRef.value.scrollTo(...args)
+      scrollTo (options: { position: 'bottom' | 'top'; slient: boolean }) {
+        logInstRef.value?.scrollTo(options)
       }
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/enUS/size.demo.md b/src/log/demos/enUS/size.demo.md
deleted file mode 100644
index f9b3bbd700a..00000000000
--- a/src/log/demos/enUS/size.demo.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Rows
-
-Use `rows` to change the size of log.
-
-```html
-<n-log
-  :rows="5"
-  :log="`1
-2
-3
-4
-5
-6`"
-/>
-```
diff --git a/src/log/demos/enUS/size.demo.vue b/src/log/demos/enUS/size.demo.vue
new file mode 100644
index 00000000000..b1f8137c882
--- /dev/null
+++ b/src/log/demos/enUS/size.demo.vue
@@ -0,0 +1,17 @@
+<markdown>
+# Rows
+
+Use `rows` to change the size of log.
+</markdown>
+
+<template>
+  <n-log
+    :rows="5"
+    :log="`1
+2
+3
+4
+5
+6`"
+  />
+</template>
diff --git a/src/log/demos/zhCN/auto-bottom.demo.md b/src/log/demos/zhCN/auto-bottom.demo.vue
similarity index 62%
rename from src/log/demos/zhCN/auto-bottom.demo.md
rename to src/log/demos/zhCN/auto-bottom.demo.vue
index 6c62a0c4934..a116a21a54a 100644
--- a/src/log/demos/zhCN/auto-bottom.demo.md
+++ b/src/log/demos/zhCN/auto-bottom.demo.vue
@@ -1,19 +1,24 @@
+<markdown>
 # 滚动到最新
 
 当日志不断增加是总是滚动到最新。
+</markdown>
 
-```html
-<n-space vertical>
-  <n-button @click="handleClick">添加数据</n-button>
-  <n-log ref="logInst" :log="log" language="naive-log" trim />
-</n-space>
-```
+<template>
+  <n-space vertical>
+    <n-button @click="handleClick">
+      添加数据
+    </n-button>
+    <n-log ref="logInst" :log="log" language="naive-log" trim />
+  </n-space>
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref, watchEffect, onMounted, nextTick } from 'vue'
+import { LogInst } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -23,13 +28,13 @@ function log () {
 export default defineComponent({
   setup () {
     const logRef = ref(log())
-    const logInstRef = ref(null)
+    const logInstRef = ref<LogInst | null>(null)
     const startRef = ref(false)
-    const timerRef = ref(null)
+    const timerRef = ref<number | null>(null)
     const handleClick = () => {
       startRef.value = !startRef.value
       if (startRef.value) {
-        timerRef.value = setInterval(() => {
+        timerRef.value = window.setInterval(() => {
           logRef.value = logRef.value + log()
         }, 1000)
       } else if (timerRef.value) {
@@ -41,7 +46,7 @@ export default defineComponent({
       watchEffect(() => {
         if (logRef.value) {
           nextTick(() => {
-            logInstRef.value.scrollTo({ position: 'bottom', slient: true })
+            logInstRef.value?.scrollTo({ position: 'bottom', slient: true })
           })
         }
       })
@@ -54,4 +59,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/zhCN/debug.demo.md b/src/log/demos/zhCN/debug.demo.vue
similarity index 62%
rename from src/log/demos/zhCN/debug.demo.md
rename to src/log/demos/zhCN/debug.demo.vue
index d06cdc90684..b98622ec33a 100644
--- a/src/log/demos/zhCN/debug.demo.md
+++ b/src/log/demos/zhCN/debug.demo.vue
@@ -1,31 +1,33 @@
+<markdown>
 # Debug
+</markdown>
 
-```html
-<n-card
-  title="Random String Logs"
-  :segmented="{
-  header: 'soft',
-  content: 'hard'
-}"
->
-  <n-log
-    style="margin-top: -12px; margin-bottom: -12px;"
-    :log="log"
-    @require-more="handleRequireMore"
-    :loading="loading"
-    trim
-  />
-  <template #action>
-    <n-button @click="clear">Clear</n-button>
-  </template>
-</n-card>
-```
-
-```js
+<template>
+  <n-card
+    title="Random String Logs"
+    :segmented="{
+      content: true
+    }"
+  >
+    <n-log
+      style="margin-top: -12px; margin-bottom: -12px"
+      :log="log"
+      :loading="loading"
+      trim
+      @require-more="handleRequireMore"
+    />
+    <template #action>
+      <n-button @click="clear">
+        Clear
+      </n-button>
+    </template>
+  </n-card>
+</template>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -57,4 +59,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/zhCN/event.demo.md b/src/log/demos/zhCN/event.demo.vue
similarity index 82%
rename from src/log/demos/zhCN/event.demo.md
rename to src/log/demos/zhCN/event.demo.vue
index 58f78b8437d..fdc2aebc061 100644
--- a/src/log/demos/zhCN/event.demo.md
+++ b/src/log/demos/zhCN/event.demo.vue
@@ -1,24 +1,26 @@
+<markdown>
 # 事件
 
 Log 有 `require-more`、`reach-top` 和 `reach-bottom` 事件。需要注意的是即使 Log 已经滚到了头或者尾，你继续滚动鼠标的时候，`require-more` 还是会被触发，而 `reach-xxx` 并不会。如果你不需要这种特性，可以使用 `reach-top` 或者 `reach-bottom`。
+</markdown>
 
-```html
-<n-log
-  :log="log"
-  @require-more="handleRequireMore"
-  @reach-top="handleReachTop"
-  @reach-bottom="handleReachBottom"
-  :loading="loading"
-  trim
-/>
-```
+<template>
+  <n-log
+    :log="log"
+    :loading="loading"
+    trim
+    @require-more="handleRequireMore"
+    @reach-top="handleReachTop"
+    @reach-bottom="handleReachBottom"
+  />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useMessage } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 10; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -33,9 +35,6 @@ export default defineComponent({
     return {
       loading: false,
       log: log(),
-      clear () {
-        logRef.value = ''
-      },
       handleRequireMore (from) {
         message.info('Require More from ' + from)
         if (loadingRef.value) return
@@ -58,4 +57,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/zhCN/highlight.demo.md b/src/log/demos/zhCN/highlight.demo.vue
similarity index 78%
rename from src/log/demos/zhCN/highlight.demo.md
rename to src/log/demos/zhCN/highlight.demo.vue
index 3dd2c691fcb..7d0990ffa20 100644
--- a/src/log/demos/zhCN/highlight.demo.md
+++ b/src/log/demos/zhCN/highlight.demo.vue
@@ -1,23 +1,25 @@
+<markdown>
 # 高亮
 
 在你使用高亮之前，请看本页开始的注意事项，那些对于确保这个例子按预期展示是很重要的。
+</markdown>
 
-```html
-<n-log
-  :log="log"
-  @require-top="handlerequireTop"
-  @require-bottom="handlerequireBottom"
-  :loading="loading"
-  language="naive-log"
-  trim
-/>
-```
+<template>
+  <n-log
+    :log="log"
+    :loading="loading"
+    language="naive-log"
+    trim
+    @require-top="handlerequireTop"
+    @require-bottom="handlerequireBottom"
+  />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -32,9 +34,6 @@ export default defineComponent({
     return {
       loading: loadingRef,
       log: logRef,
-      clear () {
-        logRef.value = ''
-      },
       handlerequireTop () {
         if (loadingRef.value) return
         loadingRef.value = true
@@ -54,4 +53,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/zhCN/index.demo-entry.md b/src/log/demos/zhCN/index.demo-entry.md
index 3fa10c8f5ca..c04f2e0c562 100644
--- a/src/log/demos/zhCN/index.demo-entry.md
+++ b/src/log/demos/zhCN/index.demo-entry.md
@@ -5,7 +5,7 @@
 如果你有一些日志要展示，可以使用 Log。
 
 <n-alert title="注意" type="warning" style="margin-bottom: 16px;">
-  由于尺寸原因，Naive UI 并不把 highlight.js 内置。如果你需要高亮日志，请确保你在使用之前已经设定了 highlight.js。
+  由于尺寸原因，Naive UI 并不把 highlight.vue.js 内置。如果你需要高亮日志，请确保你在使用之前已经设定了 highlight.js。
 </n-alert>
 
 在本页如何高亮的演示中，我们定义了一个叫做 `naive-log` 的语言来高亮全部的数字。下面的代码是我们怎么定义的。如果你想了解 highlight.js，可以参考 <n-a href="https://highlightjs.org/" target="_blank">highlight.js</n-a> 和 <n-a href="https://highlightjs.readthedocs.io/en/latest/index.html" target="_blank">highlight.js developer documentation</n-a>
@@ -43,12 +43,12 @@
 ## 演示
 
 ```demo
-size
-event
-scroll
-highlight
-loading
-auto-bottom
+size.vue
+event.vue
+scroll.vue
+highlight.vue
+loading.vue
+auto-bottom.vue
 ```
 
 ## API
diff --git a/src/log/demos/zhCN/loading.demo.md b/src/log/demos/zhCN/loading.demo.vue
similarity index 60%
rename from src/log/demos/zhCN/loading.demo.md
rename to src/log/demos/zhCN/loading.demo.vue
index 7eb10824c0f..142fbfcd9ed 100644
--- a/src/log/demos/zhCN/loading.demo.md
+++ b/src/log/demos/zhCN/loading.demo.vue
@@ -1,14 +1,16 @@
-# 加载中
+<markdown>
+# 加载
+</markdown>
 
-```html
-<n-switch v-model:value="loading" /> <n-log :loading="loading" :log="log" />
-```
+<template>
+  <n-switch v-model:value="loading" /> <n-log :loading="loading" :log="log" />
+</template>
 
-```js
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 40; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -23,4 +25,4 @@ export default defineComponent({
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/zhCN/scroll.demo.md b/src/log/demos/zhCN/scroll.demo.vue
similarity index 50%
rename from src/log/demos/zhCN/scroll.demo.md
rename to src/log/demos/zhCN/scroll.demo.vue
index 3ed7bb35fbc..a4e16d1676e 100644
--- a/src/log/demos/zhCN/scroll.demo.md
+++ b/src/log/demos/zhCN/scroll.demo.vue
@@ -1,41 +1,41 @@
+<markdown>
 # 滚动
 
 你可以很简单的让 Log 滚到顶部或者底部。同时你可以控制这个滚动操作是否发出事件。
-
-```html
-<n-space vertical>
-  <n-button-group>
-    <n-button @click="scrollTo({ position: 'bottom', slient: false })"
-      >滚动到底部</n-button
-    >
-    <n-button @click="scrollTo({ position: 'bottom', slient: true })"
-      >滚动到底部（无事件）</n-button
-    >
-    <n-button @click="scrollTo({ position: 'top', slient: false })"
-      >滚动到顶部</n-button
-    >
-    <n-button @click="scrollTo({ position: 'top', slient: true })"
-      >滚动到顶部（无事件）</n-button
-    >
-  </n-button-group>
-  <n-log
-    ref="logInstRef"
-    :log="log"
-    @require-more="handleRequireMore"
-    @reach-top="handleReachTop"
-    @reach-bottom="handleReachBottom"
-    :loading="loading"
-    trim
-  />
-</n-space>
-```
-
-```js
+</markdown>
+<template>
+  <n-space vertical>
+    <n-button-group>
+      <n-button @click="scrollTo({ position: 'bottom', slient: false })">
+        滚动到底部
+      </n-button>
+      <n-button @click="scrollTo({ position: 'bottom', slient: true })">
+        滚动到底部（无事件）
+      </n-button>
+      <n-button @click="scrollTo({ position: 'top', slient: false })">
+        滚动到顶部
+      </n-button>
+      <n-button @click="scrollTo({ position: 'top', slient: true })">
+        滚动到顶部（无事件）
+      </n-button>
+    </n-button-group>
+    <n-log
+      ref="logInstRef"
+      :log="log"
+      :loading="loading"
+      trim
+      @require-more="handleRequireMore"
+      @reach-top="handleReachTop"
+      @reach-bottom="handleReachBottom"
+    />
+  </n-space>
+</template>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-import { useMessage } from 'naive-ui'
+import { useMessage, LogInst } from 'naive-ui'
 
 function log () {
-  const l = []
+  const l: string[] = []
   for (let i = 0; i < 10; ++i) {
     l.push(Math.random().toString(16))
   }
@@ -47,14 +47,11 @@ export default defineComponent({
     const message = useMessage()
     const loadingRef = ref(false)
     const logRef = ref(log())
-    const logInstRef = ref(null)
+    const logInstRef = ref<LogInst | null>(null)
     return {
       logInstRef,
       loading: false,
       log: log(),
-      clear () {
-        logRef.value = ''
-      },
       handleRequireMore (from) {
         message.info('Require More from ' + from)
         if (loadingRef.value) return
@@ -74,10 +71,10 @@ export default defineComponent({
       handleReachBottom () {
         message.info('Reach Bottom')
       },
-      scrollTo (...args) {
-        logInstRef.value.scrollTo(...args)
+      scrollTo (options: { position: 'bottom' | 'top'; slient: boolean }) {
+        logInstRef.value?.scrollTo(options)
       }
     }
   }
 })
-```
+</script>
diff --git a/src/log/demos/zhCN/size.demo.md b/src/log/demos/zhCN/size.demo.md
deleted file mode 100644
index b8292534702..00000000000
--- a/src/log/demos/zhCN/size.demo.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 行数
-
-使用 `rows` 来设定 Log 的尺寸。
-
-```html
-<n-log
-  :rows="5"
-  :log="`1
-2
-3
-4
-5
-6`"
-/>
-```
diff --git a/src/log/demos/zhCN/size.demo.vue b/src/log/demos/zhCN/size.demo.vue
new file mode 100644
index 00000000000..9808027afad
--- /dev/null
+++ b/src/log/demos/zhCN/size.demo.vue
@@ -0,0 +1,17 @@
+<markdown>
+# 行数
+
+使用 `rows` 来设定 Log 的尺寸。
+</markdown>
+
+<template>
+  <n-log
+    :rows="5"
+    :log="`1
+2
+3
+4
+5
+6`"
+  />
+</template>
diff --git a/src/log/index.ts b/src/log/index.ts
index 9ed79770e04..f6121f1cc85 100644
--- a/src/log/index.ts
+++ b/src/log/index.ts
@@ -1,2 +1,2 @@
 export { default as NLog } from './src/Log'
-export type { LogProps } from './src/Log'
+export type { LogProps, LogInst } from './src/Log'
diff --git a/src/log/src/Log.tsx b/src/log/src/Log.tsx
index 23a2ed731fe..57a07d54301 100644
--- a/src/log/src/Log.tsx
+++ b/src/log/src/Log.tsx
@@ -13,15 +13,17 @@ import {
 import { throttle } from 'lodash-es'
 import { useTheme, useHljs, ThemeProps, useConfig } from '../../_mixins'
 import type { Hljs } from '../../_mixins'
-import { ExtractPublicPropTypes, warn } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
+import { warn } from '../../_utils'
 import { NScrollbar } from '../../_internal'
 import type { ScrollbarInst } from '../../_internal'
 import { NCode } from '../../code'
-import { logLight, LogTheme } from '../styles'
+import type { LogTheme } from '../styles'
+import { logLight } from '../styles'
 import NLogLoader from './LogLoader'
 import NLogLine from './LogLine'
-import style from './styles/index.cssr'
 import { logInjectionKey } from './context'
+import style from './styles/index.cssr'
 
 export interface LogInjection {
   trimRef: Ref<boolean>
@@ -30,6 +32,14 @@ export interface LogInjection {
   mergedHljsRef: Ref<Hljs | undefined>
 }
 
+export interface LogInst {
+  scrollTo: ((options: {
+    slient?: boolean
+    position: 'top' | 'bottom'
+  }) => void) &
+    ((options: { slient?: boolean, top: number }) => void)
+}
+
 const logProps = {
   ...(useTheme.props as ThemeProps<LogTheme>),
   loading: Boolean,
@@ -78,8 +88,9 @@ export default defineComponent({
       return props.language !== undefined
     })
     const styleHeightRef = computed(() => {
-      const lineHeight = Math.floor(props.fontSize * props.lineHeight)
-      return `calc(${props.rows * lineHeight}px)`
+      return `calc(${Math.round(
+        props.rows * props.lineHeight * props.fontSize
+      )}px)`
     })
     const mergedLinesRef = computed(() => {
       const { log } = props
@@ -200,13 +211,18 @@ export default defineComponent({
       trimRef: toRef(props, 'trim'),
       highlightRef
     })
+
+    const exportedMethods: LogInst = {
+      scrollTo
+    }
+
     return {
+      ...exportedMethods,
       mergedClsPrefix: mergedClsPrefixRef,
       scrollbarRef,
       mergedTheme: themeRef,
       styleHeight: styleHeightRef,
       mergedLines: mergedLinesRef,
-      scrollTo,
       scrollToTop,
       scrollToBottom,
       handleWheel,
diff --git a/src/log/src/styles/index.cssr.ts b/src/log/src/styles/index.cssr.ts
index f445e4c1e0f..84c25bc6b8d 100644
--- a/src/log/src/styles/index.cssr.ts
+++ b/src/log/src/styles/index.cssr.ts
@@ -14,11 +14,9 @@ export default cB('log', `
   box-sizing: border-box;
   transition: border-color .3s var(--n-bezier);
 `, [
-  cE('lines', `
-    margin: 0;
-    white-space: pre-wrap;
-  `),
   c('pre', `
+    white-space: pre-wrap;
+    word-break: break-word;
     margin: 0;
   `),
   cB('log-loader', `