feat(code): add word-wrap prop

CHANGELOG.en-US.md

@@ -15,6 +15,7 @@
 
 ### Feats
 
+- `n-code` support soft wrap, closes [#2111](https://github.com/TuSimple/naive-ui/issues/2111).
 - `n-modal` adds `z-index` prop, closes [#2088](https://github.com/TuSimple/naive-ui/issues/2088).
 - `n-drawer` adds `z-index` closes.
 - `n-drawer` adds wai-aria support.

CHANGELOG.zh-CN.md

@@ -15,6 +15,7 @@
 
 ### Feats
 
+- `n-code` 支持软换行，关闭 [#2111](https://github.com/TuSimple/naive-ui/issues/2111)
 - `n-modal` 新增 `z-index` 属性，关闭 [#2088](https://github.com/TuSimple/naive-ui/issues/2088)
 - `n-drawer` 新增 `z-index` 属性
 - `n-drawer` 新增 wai-aria 支持

src/code/demos/enUS/index.demo-entry.md

@@ -37,6 +37,7 @@ The following code shows how to set hljs of Code. Importing highlight.js on dema
 ```demo
 basic.vue
 inline.vue
+softwrap.vue
 ```
 
 ## API

src/code/demos/enUS/softwrap.demo.vue

@@ -0,0 +1,23 @@
+<markdown>
+# soft wrap
+</markdown>
+
+<template>
+  <div>
+    <n-code :code="code" language="html" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      code: `
+        <p class="n-p" data-v-79af885b="" style="--n-bezier:cubic-bezier(0.4, 0, 0.2, 1); --n-font-size:14px; --n-line-height:1.6; --n-text-color:rgb(51, 54, 57); font-size: 16px; margin-top: 0px; margin-bottom: 0px;">sometimes naive</p>
+      `
+    }
+  }
+})
+</script>

src/code/demos/zhCN/index.demo-entry.md

@@ -37,6 +37,7 @@
 ```demo
 basic.vue
 inline.vue
+softwrap.vue
 loop-debug.vue
 ```
 

src/code/demos/zhCN/softwrap.demo.vue

@@ -0,0 +1,23 @@
+<markdown>
+# 软换行
+</markdown>
+
+<template>
+  <div>
+    <n-code :code="code" language="html" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      code: `
+        <p class="n-p" data-v-79af885b="" style="--n-bezier:cubic-bezier(0.4, 0, 0.2, 1); --n-font-size:14px; --n-line-height:1.6; --n-text-color:rgb(51, 54, 57); font-size: 16px; margin-top: 0px; margin-bottom: 0px;">还是得再学习一个</p>
+      `
+    }
+  }
+})
+</script>

src/code/src/styles/index.cssr.ts

@@ -23,6 +23,7 @@ export default c([
     c('pre', `
       margin: 0;
       font-family: inherit;
+      white-space: pre-wrap;
     `),
     c('[class^=hljs]', `
       color: var(--n-text-color);