next-prism
Advanced tools
Comparing version 0.4.1 to 0.5.0
{ | ||
"name": "next-prism", | ||
"version": "0.4.1", | ||
"version": "0.5.0", | ||
"description": "A lightweight, robust, and elegant syntax highlighting component for your next React apps.", | ||
@@ -5,0 +5,0 @@ "author": "Bunlong <bunlong.van@gmail.com>", |
@@ -41,9 +41,7 @@ # next-prism | ||
return ( | ||
<> | ||
<Code language='javascript'> | ||
<Code language='javascript'> | ||
{`<div className="example"> | ||
{Math.random()} | ||
</div>`} | ||
</Code> | ||
</> | ||
</Code> | ||
) | ||
@@ -72,9 +70,5 @@ } | ||
<> | ||
<button onClick={() => setCount(count + 1)}> | ||
Click me | ||
</button> | ||
<button onClick={() => setCount(count + 1)}>Click me</button> | ||
<p>You clicked {count} times</p> | ||
<Code language='javascript'> | ||
{`<p>You clicked ${count} times<p>`} | ||
</Code> | ||
<Code language='javascript'>{`<p>You clicked ${count} times<p>`}</Code> | ||
</> | ||
@@ -782,9 +776,7 @@ ) | ||
return ( | ||
<> | ||
<Code language='javascript' lineNumbers={true}> | ||
<Code language='javascript' lineNumbers={true}> | ||
{`<div className="example"> | ||
{Math.random()} | ||
</div>`} | ||
</Code> | ||
</> | ||
</Code> | ||
) | ||
@@ -813,9 +805,7 @@ } | ||
return ( | ||
<> | ||
<Code language='javascript'> | ||
<Code language='javascript'> | ||
{`<div className="example"> | ||
{Math.random()} | ||
{Math.random()} | ||
</div>`} | ||
</Code> | ||
</> | ||
</Code> | ||
) | ||
@@ -825,7 +815,35 @@ } | ||
### Autolinker | ||
Converts URLs and emails in code to clickable links. Parses Markdown links in comments. | ||
```javascript | ||
import { usePrism } from 'next-prism' | ||
// Import a theme.css | ||
import 'next-prism/themes/tomorrow.css' | ||
// Import autolinker source | ||
import 'next-prism/plugins/autolinker/autolinker' | ||
// Import autolinker.css | ||
import 'next-prism/plugins/autolinker/autolinker.css' | ||
function App() { | ||
const { Code } = usePrism() | ||
return ( | ||
<Code language="javascript"> | ||
{`<div className="example"> | ||
<a href="https://github.com/Bunlong/next-prism">next-prism</a> | ||
</div>`} | ||
</Code> | ||
); | ||
} | ||
``` | ||
## 📜 Changelog | ||
Latest version 0.4.0 (2022-12-17): | ||
Latest version 0.5.0 (2022-12-18): | ||
* Add show-invisibles plugins | ||
* Add autolinker plugins | ||
@@ -832,0 +850,0 @@ Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-prism/blob/master/CHANGELOG.md). |
55782
21
421
893