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.

Sign up for GitHub

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

fix: component CodeBlock not able to highlight lines. #3480

Merged
merged 10 commits into from
Jan 14, 2025
Merged

fix: component CodeBlock not able to highlight lines. #3480

Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8c8c5ab
Fixed code highlighting bug
SahilDahekar Dec 16, 2024
8d30dd1
Added coderabbit recommendation
SahilDahekar Dec 16, 2024
aba345a
Merge branch 'asyncapi:master' into code-highlight
SahilDahekar Dec 17, 2024
abae053
Merge branch 'master' into code-highlight
akshatnema Dec 18, 2024
6e58b47
Merge branch 'master' into code-highlight
SahilDahekar Dec 20, 2024
5688b93
Merge branch 'master' into code-highlight
SahilDahekar Dec 21, 2024
2f22eb6
Merge branch 'master' into code-highlight
asyncapi-bot Dec 30, 2024
6dd5f8c
Merge branch 'asyncapi:master' into code-highlight
SahilDahekar Jan 9, 2025
a2de4d0
Merge branch 'asyncapi:master' into code-highlight
SahilDahekar Jan 13, 2025
2183541
Merge branch 'master' into code-highlight
asyncapi-bot Jan 14, 2025
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
22 changes: 17 additions & 5 deletions components/editor/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,22 +273,34 @@ export default function CodeBlock({
background: '#252f3f'
}}
lineNumberStyle={(lineNumber: number) => {
const isHighlighted = highlightedLines && highlightedLines.includes(lineNumber);
const isHighlighted = highlightedLines?.includes(lineNumber);

return {
const styles: React.CSSProperties = {
display: 'inline-block',
marginLeft: '16px',
paddingRight: '16px',
background: isHighlighted ? '#252f3f' : 'inherit',
backgroundColor: isHighlighted ? '#3e4d64' : '#252f3f',
color: isHighlighted ? '#A3ACAD' : '#8B9394'
};

return styles;
}}
wrapLines={true}
lineProps={(lineNumber: number) => {
const isHighlighted = highlightedLines && highlightedLines.includes(lineNumber);
const isHighlighted = highlightedLines?.includes(lineNumber);

const style: React.CSSProperties = {
paddingRight: '2rem'
};

if (isHighlighted) {
style.display = 'block';
style.width = '100%';
style.backgroundColor = '#3e4d64';
}

return {
className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`
style
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SahilDahekar Why are we relying on custom CSS instead of tailwind utility classes?

Copy link
Contributor Author

@SahilDahekar SahilDahekar Dec 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know why but tailwind utility classes were not understood by the react-syntax-highlight library . Other than this i think passing custom css to a external library is a safer option than relying on it for parsing tailwind utility classes

};
}}
codeTagProps={{
Expand Down
Loading