Merge pull request #273 from timlrx/feat/code-diff

feat: upgrade rehype-prism-plus and add default diff css
This commit is contained in:
Timothy 2021-11-19 00:04:11 +08:00 committed by GitHub
commit 40adee4707
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 18 deletions

View File

@ -20,7 +20,15 @@
}
.code-line {
@apply block pl-4 pr-4 -mx-4 border-l-4 border-gray-800;
@apply block pl-4 pr-4 -mx-4 border-l-4 border-opacity-0;
}
.code-line.inserted {
@apply bg-green-500 bg-opacity-20;
}
.code-line.deleted {
@apply bg-red-500 bg-opacity-20;
}
.highlight-line {

View File

@ -313,11 +313,23 @@ sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert('Sum = ' + sum) // "+" means combine into a string
```
To modify the styles, change the following class selectors in the `tailwind.css` file:
To modify the styles, change the following class selectors in the `prism.css` file:
```css
.code-highlight {
@apply float-left min-w-full;
}
.code-line {
@apply pl-4 -mx-4 border-l-4 border-gray-800;
@apply block pl-4 pr-4 -mx-4 border-l-4 border-opacity-0;
}
.code-line.inserted {
@apply bg-green-500 bg-opacity-20;
}
.code-line.deleted {
@apply bg-red-500 bg-opacity-20;
}
.highlight-line {
@ -325,7 +337,7 @@ To modify the styles, change the following class selectors in the `tailwind.css`
}
.line-number::before {
@apply pr-4 -ml-2 text-gray-400;
@apply inline-block w-4 mr-4 -ml-2 text-right text-gray-400;
content: attr(line);
}
```

40
package-lock.json generated
View File

@ -5217,9 +5217,9 @@
}
},
"hast-util-to-html": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.2.tgz",
"integrity": "sha512-ipLhUTMyyJi9F/LXaNDG9BrRdshP6obCfmUZYbE/+T639IdzqAOkKN4DyrEyID0gbb+rsC3PKf0XlviZwzomhw==",
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.3.tgz",
"integrity": "sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==",
"requires": {
"@types/hast": "^2.0.0",
"ccount": "^2.0.0",
@ -5229,10 +5229,24 @@
"html-void-elements": "^2.0.0",
"property-information": "^6.0.0",
"space-separated-tokens": "^2.0.0",
"stringify-entities": "^4.0.0",
"stringify-entities": "^4.0.2",
"unist-util-is": "^5.0.0"
},
"dependencies": {
"character-entities-legacy": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="
},
"stringify-entities": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.2.tgz",
"integrity": "sha512-MTxTVcEkorNtBbNpoFJPEh0kKdM6+QbMjLbaxmvaPMmayOXdr/AIVIIJX7FReUVweRBFJfZepK4A4AKgwuFpMQ==",
"requires": {
"character-entities-html4": "^2.0.0",
"character-entities-legacy": "^3.0.0"
}
},
"unist-util-is": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.1.1.tgz",
@ -5298,9 +5312,9 @@
"integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
},
"html-void-elements": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.0.tgz",
"integrity": "sha512-4OYzQQsBt0G9bJ/nM9/DDsjm4+fVdzAaPJJcWk5QwA3GIAPxQEeOR0rsI8HbDHQz5Gta8pVvGnnTNSbZVEVvkQ=="
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
"integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A=="
},
"http-cache-semantics": {
"version": "4.1.0",
@ -8357,9 +8371,9 @@
}
},
"refractor": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/refractor/-/refractor-4.2.1.tgz",
"integrity": "sha512-UhtiILJUJiKquZZPtPokJZAKu2a35cT6gPBXyv2FJj+3T+AC8fyUzVUvA0lyiiYNl9m2ShCW/SSDC9us/FsuvQ==",
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/refractor/-/refractor-4.2.2.tgz",
"integrity": "sha512-pMCVw0+JQC0OSlp+pB4rTdojWGX3YxZeCRzqbZbWrJa9LU2O8kXGjQr9alNKMCArArcESBdBQZ5TIS8RWP2MdA==",
"requires": {
"@types/hast": "^2.0.0",
"@types/prismjs": "^1.0.0",
@ -8502,9 +8516,9 @@
}
},
"rehype-prism-plus": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-1.1.1.tgz",
"integrity": "sha512-dbc+ZlRN+CIafcxoNnuhXrTiurin1BBZwyy3XuolvAKF0n15CYaMVl7o3yxbrt5wLgAmqgR0FMrMUxwGadwYZA==",
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-1.1.3.tgz",
"integrity": "sha512-ADk7Wr5HJO0igRfwYOzBi2AYu8Wd9YRsDOxp/fRtZXjelujr8PHjEkYNmH9TEKTJp2U72vU4tKaOn/49MuhDUw==",
"requires": {
"hast-util-to-html": "^8.0.1",
"hast-util-to-string": "^2.0.0",

View File

@ -31,7 +31,7 @@
"rehype-autolink-headings": "^6.0.0",
"rehype-citation": "^0.1.1",
"rehype-katex": "^6.0.0",
"rehype-prism-plus": "^1.1.0",
"rehype-prism-plus": "^1.1.3",
"rehype-slug": "^5.0.0",
"remark-footnotes": "^4.0.0",
"remark-gfm": "^2.0.0",