mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-14 15:14:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add new css class for code highlighting

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-09-16 21:07:27 +02:00
parent 6fe8967c44
commit fa82368dfd
4 changed files with 45 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

8
cypress/integration/autocompletion.spec.ts
View file

@ -26,9 +26,7 @@ describe('Autocompletion', () => {
.should('have.text', '```abnf') .should('have.text', '```abnf')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span') cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
.should('have.text', '```') .should('have.text', '```')
cy.getMarkdownBody() cy.getMarkdownBody().find('.code-highlighter').should('exist')
.find('pre > code')
.should('exist')
}) })
it('via doubleclick', () => { it('via doubleclick', () => {
cy.codemirrorFill('```') cy.codemirrorFill('```')
@ -41,9 +39,7 @@ describe('Autocompletion', () => {
.should('have.text', '```abnf') .should('have.text', '```abnf')
cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span') cy.get('.CodeMirror-code > div:nth-of-type(3) > .CodeMirror-line > span span')
.should('have.text', '```') .should('have.text', '```')
cy.getMarkdownBody() cy.getMarkdownBody().find('.code-highlighter').should('exist')
.find('pre > code')
.should('exist')
}) })
}) })

4
cypress/integration/highlightedCodeBlock.spec.ts
View file

@ -5,9 +5,7 @@
*/ */
const findHljsCodeBlock = () => { const findHljsCodeBlock = () => {
return cy.getMarkdownBody() return cy.getMarkdownBody().find('.code-highlighter > code.hljs').should('be.visible')
.find('pre > code.hljs')
.should('be.visible')
} }
describe('Code', () => { describe('Code', () => {

4
src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.scss
View file

@ -4,14 +4,13 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
.markdown-body { .code-highlighter {
@import '../../../../../../node_modules/highlight.js/styles/github'; @import '../../../../../../node_modules/highlight.js/styles/github';
body.dark & { body.dark & {
@import '../../../../../../node_modules/highlight.js/styles/github-dark'; @import '../../../../../../node_modules/highlight.js/styles/github-dark';
} }
pre, & {
code.hljs { code.hljs {
overflow-x: auto; overflow-x: auto;
background-color: rgba(27, 31, 35, .05); background-color: rgba(27, 31, 35, .05);
@ -62,5 +61,4 @@
} }
} }
} }
}
} }

4
src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx
View file

@ -61,14 +61,14 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
}, [code, language, startLineNumber]) }, [code, language, startLineNumber])
return ( return (
<Fragment> <div className={'code-highlighter'}>
<code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}> <code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
{dom} {dom}
</code> </code>
<div className={'text-right button-inside'}> <div className={'text-right button-inside'}>
<CopyToClipboardButton content={code} data-cy='copy-code-button' /> <CopyToClipboardButton content={code} data-cy='copy-code-button' />
</div> </div>
</Fragment> </div>
) )
} }