@sanity/code-input 2.21.10-shopify.5 → 2.21.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -22,8 +22,8 @@ Use it in your schema types:
|
|
|
22
22
|
{
|
|
23
23
|
name: 'exampleUsage',
|
|
24
24
|
title: 'Example usage',
|
|
25
|
-
type: 'code'
|
|
26
|
-
}
|
|
25
|
+
type: 'code',
|
|
26
|
+
},
|
|
27
27
|
]
|
|
28
28
|
}
|
|
29
29
|
```
|
|
@@ -69,6 +69,42 @@ Note that the above only works if you import and use the `all:part:@sanity/base/
|
|
|
69
69
|
}
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
+
## Example usage in frontend (React)
|
|
73
|
+
|
|
74
|
+
You can use any syntax highlighter you want - but not all of them might support highlighted lines or the syntax you've defined.
|
|
75
|
+
|
|
76
|
+
As outlined above, the actual code is stored in a `code` property, so if your schema has a field called `codeExample` of type `code`, the property you'd want to pass to the highlighter would be `codeExample.code`.
|
|
77
|
+
|
|
78
|
+
Here's an example using [react-refractor](https://github.com/rexxars/react-refractor):
|
|
79
|
+
|
|
80
|
+
```jsx
|
|
81
|
+
import React from 'react'
|
|
82
|
+
import Refractor from 'react-refractor'
|
|
83
|
+
import js from 'refractor/lang/javascript'
|
|
84
|
+
|
|
85
|
+
Refractor.registerLanguage(js)
|
|
86
|
+
|
|
87
|
+
export function Code(props) {
|
|
88
|
+
return (
|
|
89
|
+
<Refractor
|
|
90
|
+
// In this example, `props` is the value of a `code` field
|
|
91
|
+
language={props.language}
|
|
92
|
+
value={props.code}
|
|
93
|
+
markers={props.highlightedLines}
|
|
94
|
+
/>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export default Code
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Other syntax highlighters include:
|
|
102
|
+
|
|
103
|
+
- [react-lowlight](https://github.com/rexxars/react-lowlight)
|
|
104
|
+
- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
|
|
105
|
+
- [highlight.js](https://github.com/highlightjs/highlight.js)
|
|
106
|
+
- [prism](https://github.com/PrismJS/prism)
|
|
107
|
+
|
|
72
108
|
## License
|
|
73
109
|
|
|
74
110
|
MIT-licensed. See LICENSE.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sanity/code-input",
|
|
3
|
-
"version": "2.21.10
|
|
3
|
+
"version": "2.21.10",
|
|
4
4
|
"description": "Ace editor for editing code",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"types": "./dist/dts",
|
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@reach/auto-id": "^0.13.2",
|
|
24
|
-
"@sanity/base": "2.21.10
|
|
24
|
+
"@sanity/base": "2.21.10",
|
|
25
25
|
"@sanity/icons": "^1.2.1",
|
|
26
|
-
"@sanity/types": "2.21.10
|
|
27
|
-
"@sanity/ui": "^0.36.
|
|
28
|
-
"@sanity/util": "2.21.10
|
|
26
|
+
"@sanity/types": "2.21.10",
|
|
27
|
+
"@sanity/ui": "^0.36.15",
|
|
28
|
+
"@sanity/util": "2.21.10",
|
|
29
29
|
"brace": "^0.11.1",
|
|
30
30
|
"lodash": "^4.17.15",
|
|
31
31
|
"react-ace": "^5.0.1"
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"url": "git+https://github.com/sanity-io/sanity.git",
|
|
48
48
|
"directory": "packages/@sanity/code-input"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "9a0270c7c886a2913fd83b54c1963ae0cd8e75d0"
|
|
51
51
|
}
|