Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: highlight lines #14

Merged
merged 2 commits into from
Jan 25, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { Editor } from 'codice'
title="My Code Editor"
value="const hello = 'world';"
onChange={(code) => console.log(code)}
highlight={(code) => code}
/>
```

Expand All @@ -33,7 +32,6 @@ The following props are supported by the `Editor` component:
- `title` (optional): A string representing the title of the editor.
- `controls` (optional): A boolean value indicating whether to display the controls for the editor.
- `lineNumbers` (optional): A boolean value indicating whether to display line numbers in the editor.
- `highlight` (optional): A function used to provide syntax highlighting for the code. It should accept the code as an argument and return the highlighted code as an HTML string. You can use any syntax highlighting library (e.g., [Prism](https://prismjs.com/)) to implement this functionality.

Additionally, you can pass any other props to the `Editor` component, which will be applied to the root `div` element.

Expand Down
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,13 @@
"devDependencies": {
"@types/react": "^19.0.7",
"bunchee": "^6.3.2",
"next": "15.1.5",
"next": "15.1.6",
"react-dom": "^19.0.0",
"typescript": "^5.7.3",
"vitest": "^3.0.2"
},
"packageManager": "[email protected]"
"packageManager": "[email protected]",
"dependencies": {
"sugar-high": "^0.8.2"
}
}
130 changes: 128 additions & 2 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

29 changes: 20 additions & 9 deletions site/app/code-example.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Code } from 'codice'
import { highlight } from 'sugar-high'

const CODE_SIMPLE_SNIPPET_HTML = highlight(`console.log("hello world")`)
const CODE_SIMPLE_SNIPPET_HTML = (`console.log("hello world")`)

const CODE_ULTIMATE_SNIPPET_HTML = highlight(`\
const CODE_ULTIMATE_SNIPPET_HTML = (`\
import { Code } from 'codice'

<Code controls title="app/index.js">
Expand All @@ -29,18 +28,30 @@ function CodeExampleItem({
export function CodeExamples() {
return (
<div className="code-example">
<CodeExampleItem title="Ultimate Code Block">
<CodeExampleItem title="Code Block with Controls and Title">
<Code className="code" controls title="app/index.js">
{CODE_ULTIMATE_SNIPPET_HTML}
</Code>
</CodeExampleItem>

<CodeExampleItem title="Code Block with title">
<Code className="code" title="app/index.js">
{highlight(`\
<CodeExampleItem title="Code Block with Highlighted Lines">
<Code
className="code" title="app/index.js"
highlightLines={[1, [4,5]]}
lineNumbers={true}
>
{`\
import { highlight } from 'sugar-high'

function marker() {
return "long live sugar-high"
}`)}
const code = "return 'long live sugar-high'"
return highlight(code)
}

const html = marker()

render(html)
`}
</Code>
</CodeExampleItem>

Expand Down
1 change: 0 additions & 1 deletion site/app/editor-example.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export default function Page() {
value={code}
className='editor'
title='index.js'
highlight={text => highlight(text)}
onChange={(text) => setCode(text)}
/>
</div>
Expand Down
2 changes: 0 additions & 2 deletions site/app/live-editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { Editor } from 'codice'
import { useState } from 'react'
import { highlight } from 'sugar-high'

const CODE_QUERY_KEY = 'c'

Expand Down Expand Up @@ -71,7 +70,6 @@ export function LiveEditor({
title={title}
controls={controls}
lineNumbers={lineNumbers}
highlight={(text) => highlight(text)}
onChange={(text) => setCode(text)}
/>
</div>
Expand Down
8 changes: 1 addition & 7 deletions site/app/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -153,16 +153,10 @@ input[type=radio] {
.editor[data-codice-editor] textarea:focus {
border: 1px solid hsla(137, 100.00%, 94.30%, 0.30);
}
.editor[data-codice-editor-line-numbers="false"] [data-codice-editor-content] {
padding-left: 0;
}
.editor[data-codice-editor-line-numbers="true"] [data-codice-editor-content] {
padding-left: 16px;
}
[data-codice-editor-title] {
color: hsla(0, 0%, 87%, 0.34);
}
:nth

[data-codice-editor-control] {
transition: background-color 0.2s ease-in-out;
}
Expand Down
6 changes: 6 additions & 0 deletions site/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/** @type {import('next').NextConfig} */
module.exports = {
experimental: {
reactOwnerStack: true,
},
}
Loading
Loading