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

Restructure highlight code to enable line wrapping (#265)

Browse source 
* Restructure highlight code to enable line wrapping

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
mrdrogdrog 2020-06-23 22:09:56 +02:00 • committed by GitHub
parent 6bf214542e
commit eb56da7871
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 63 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/common/highlighted-code/highlighted-code.scss
View file

@ -1,33 +1,42 @@
.markdown-body pre code {
.markdown-body {
@import '../../../../node_modules/highlight.js/styles/github-gist';
}
&.hljs {
display: flex;
flex-direction: row;
}
.markdown-body pre code.hljs {
.linenumbers {
text-align: right;
position: relative;
cursor: default;
z-index: 4;
padding: 0 8px 0 0;
min-width: 20px;
box-sizing: content-box;
color: #afafaf;
border-right: 3px solid #6ce26c;
display: flex;
flex-direction: column;
float: left;
overflow: hidden;
user-select: none;
padding: 16px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
& > span:before {
content: attr(data-line-number);
&.showGutter {
.linenumber {
position: relative;
cursor: default;
z-index: 4;
padding: 0 8px 0 0;
min-width: 20px;
box-sizing: content-box;
color: #afafaf;
border-right: 3px solid #6ce26c;
flex-direction: column;
overflow: hidden;
user-select: none;
display: flex;
align-items: flex-end;
&:before {
content: attr(data-line-number);
}
}
}
.code {
float: left;
&.showGutter .line {
margin: 0 0 0 16px;
}
&.wrapLines .line {
white-space: pre-wrap;
}
}