- Available for all Jetbrains IDEs.
- Support all languages.
- Report highlighting might not work if language fall of this list.
- Line markers in the IDE might be misplaced depending on the granularity of the PSI elements.
- We use prism in order to highlight code snippets.
- In order to update the scripts (
prism.cssandprism.js), simply go to the following page.- Here are the options we currently use:
- Compression: Minified version
- Theme: Coy
- Languages: All
- Plugins:
- Line Highlight
- Line Numbers
- Normalize whitespace
- Toolbar
- Copy to Clipboard Button
- Here are the options we currently use:
- We also customize the exported stylesheet.
- Remove the pseudo-elements on the pre tag
pre[class*="language-"]:before, pre[class*="language-"]:after { content: ''; z-index: -2; display: block; position: absolute; bottom: 0.75em; left: 0.18em; width: 40%; height: 20%; max-height: 13em; box-shadow: 0px 13px 8px #979797; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); }
- Remove line highlight gradient
.line-highlight { background: linear-gradient(to right, hsla(201, 100%, 50%, .1) 70%, hsla(201, 100%, 50%, 0)); }
- Modify the line highlighting color
.line-highlight { ... background: hsla(201, 100%, 50%, .08); ... } .line-highlight:before, .line-highlight[data-end]:after { ... background-color: hsla(201, 100%, 50%, 1); color: hsl(201, 100%, 95%); ... }
- Remove vertical separator
pre[class*="language-"] > code { ... border-left: 10px solid #358ccb; box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; ... }
- Remove alternate line background
pre[class*="language-"] > code { ... background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); background-size: 3em 3em; background-origin: content-box; background-attachment: local; ... }
- Remove right padding
code[class*="language"] { ... padding: 0 1em; ... }
- Remove margin pre tag
pre[class*="language-"] { ... margin: 0; ... } /* Margin bottom to accommodate shadow */ :not(pre) > code[class*="language-"], pre[class*="language-"] { background-color: #fdfdfd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 1em; }
- Modify code background color
pre[class*="language-"] > code { ... background-color: #ededed; ... }
- Remove tokens background color
.token.operator, .token.entity, .token.url, .token.variable { ... background: rgba(255, 255, 255, 0.5); ... } .language-css .token.string, .style .token.string { ... background: rgba(255, 255, 255, 0.5); ... }
- Remove inline code related styling
/* Inline code */ :not(pre) > code[class*="language-"] { position: relative; padding: .2em; border-radius: 0.3em; color: #c92c2c; border: 1px solid rgba(0, 0, 0, 0.1); display: inline; white-space: normal; } :not(pre) > code[class*="language-"]:after, pre[class*="language-"]:after { right: 0.75em; left: auto; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); }
- Hide overflow code block
code[class*="language"] { ... overflow: hidden; }
- Remove the pseudo-elements on the pre tag
In order to use JQuery, we have to download a minified version.
We are currently using the version jQuery Core 3.4.1.
There was a mention to include integrity and crossorigin attributes to the script tag, but we did not.
Favicon images have been generated using Real Favicon Generator.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent