Merge pull request #4 from yuhangch/fix-issue-3

🐛 Improve word wrap in <li> <code> <blockquote>.
Wiener234 · Apr 26, 2024 · 9a99de7 · 9a99de7
2 parents 9d6483c + 39c46cb
commit 9a99de7
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 3 deletions.
diff --git a/src/content/posts/markdown-example.md b/src/content/posts/markdown-example.md
@@ -76,7 +76,7 @@ Paragraphs can be multiline too when they constitute words that make up more tha
 
 ## Code Blocks
 
-Syntax highlighting is done using [Prism.js](https://github.com/PrismJS/prism). You can customise to whichever theme you want from the [plenty available prism themes](https://github.com/PrismJS/prism-themes).
+Syntax highlighting is done using [expressive code](https://expressive-code.com/).
 
 ```html title="index.html"
 <!DOCTYPE html>

diff --git a/src/content/posts/test-issues-3.md b/src/content/posts/test-issues-3.md
@@ -0,0 +1,29 @@
+---
+title: "Test post for issues #3"
+description: ""
+pubDate: 2024-04-23
+tags: ['markdown','example']
+categories: ['tech']
+draft: true
+---
+
+## li
+- list A
+- list BananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBanana
+- list C
+- list D Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands 
+- `BananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBanana`
+- list D Publish something awesome with your panda hands `BananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBanana`
+
+
+> list BananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBanana
+ list C
+ list D Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands
+ `BananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBananaBanana`
+ list D Publish something awesome with your panda hands `BananaBananaBananaBananaBananaBananaBananaBananaBan
+
+
+## code
+```text
+list D Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands Publish something awesome with your panda hands 
+```
diff --git a/uno.config.ts b/uno.config.ts
@@ -11,18 +11,36 @@ export default defineConfig({
         presetMini(),
         presetTypography({
             cssExtend: {
-                a: {
+                'a': {
                     // no underline
                     textDecoration: 'none',
                     'font-size': '.9em',
                     // add underline offset
                     textDecorationThickness: '0.1em',
                     textDecorationColor: 'rgb(var(--color-text-link))'
                 },
+                // li word-break reference: issue #3
+                'li':{
+                    'word-break': 'break-all',
+                },
+                'li code': {
+                    'white-space': 'pre-wrap',
+                    'word-break': 'break-word',
+                    'margin': '0.2rem',
+                    'padding': '0.15em 0.3em',
+                    'border-radius': '0.2em',
+                    'background-color': 'var(--color-code-bg)'
+                }, 
+                'li code::after': {
+                    content: 'none'
+                },
+                'li code::before': {
+                    content: 'none'
+                },  
                 'a:hover': {
                     color: 'rgb(var(--color-text-link-hover))'
                 },
-                'pre,code': {
+                'pre code': {
                     margin: '0.2rem',
                     padding: '0.15em 0.3em',
                     'border-radius': '0.2em',
@@ -33,6 +51,18 @@ export default defineConfig({
                 },
                 'p code::before': {
                     content: 'none'
+                },
+                // blockquote word-break reference: issue #3
+                'blockquote p': {
+                    'word-break': 'break-all',
+                },
+                'blockquote code': {
+                    'white-space': 'pre-wrap',
+                    'word-break': 'break-word',
+                    'margin': '0.2rem',
+                    'padding': '0.15em 0.3em',
+                    'border-radius': '0.2em',
+                    'background-color': 'var(--color-code-bg)'
                 }
             }
         })