phares3757/vscode-kanbn
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Syntax highlighting in code blocks

Browse Source
This commit is contained in:
Gordon
2021-06-05 22:09:13 +01:00
parent 935737ea62
commit d79f216687
6 changed files with 308 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/TaskEditor.tsx
View File

@ -8,6 +8,7 @@ import ReactMarkdown from 'react-markdown';
import TextareaAutosize from 'react-textarea-autosize';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import 'katex/dist/katex.min.css';
interface KanbnTaskValidationOutput {
@ -27,11 +28,30 @@ interface KanbnTaskValidationInput extends KanbnTaskValidationOutput {
id: string
}
const components = {
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter
style=""
useInlineStyles={false}
language={match[1]}
PreTag="div"
children={String(children).replace(/\n$/, '')}
{...props}
/>
) : (
<code className={className} children={children} {...props} />
);
}
};
const Markdown = props => (<ReactMarkdown {...{
...props,
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex]
}}/>);
rehypePlugins: [rehypeKatex],
components,
...props,
}} />);
const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUuid, vscode }: {
task: KanbnTask | null,
@ -269,9 +289,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
as={TextareaAutosize}
name="description"
/>
: <Markdown className="kanbn-task-editor-description-preview">
{values.description}
</Markdown>
: <Markdown className="kanbn-task-editor-description-preview" children={values.description} />
}
<ErrorMessage
className="kanbn-task-editor-field-errors"
@ -468,9 +486,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
name={`comments.${index}.text`}
/>
</React.Fragment>
: <Markdown className="kanbn-task-editor-comment-text">
{comment.text}
</Markdown>
: <Markdown className="kanbn-task-editor-comment-text" children={comment.text} />
}
</div>
</div>

174
src/index.css
View File

@ -9,6 +9,10 @@ body.vscode-high-contrast {
color: var(--vscode-foreground);
}
/*-----------------------------------------------------------------------------
Board styles
-----------------------------------------------------------------------------*/
.kanbn-header-name {
font-size: 1.5em;
margin-top: 0;
@ -85,6 +89,10 @@ body.vscode-high-contrast {
background-color: var(--vscode-button-hoverBackground);
}
.kanbn-header-button-inactive {
opacity: 0.6;
}
.kanbn-board {
display: flex;
align-items: stretch;
@ -180,6 +188,10 @@ body.vscode-high-contrast {
border-color: #e83;
}
/*-----------------------------------------------------------------------------
Task styles
-----------------------------------------------------------------------------*/
.kanbn-task {
position: relative;
overflow: hidden;
@ -287,6 +299,10 @@ body.vscode-dark .kanbn-task {
transition: width .5s ease-in-out;
}
/*-----------------------------------------------------------------------------
Task editor styles
-----------------------------------------------------------------------------*/
.kanbn-task-editor-title {
font-size: 1.5em;
margin-top: 0;
@ -539,6 +555,10 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
float: right;
}
/*-----------------------------------------------------------------------------
Burndown chart styles
-----------------------------------------------------------------------------*/
.kanbn-burndown-settings {
position: relative;
flex: 1;
@ -587,10 +607,6 @@ body.vscode-dark .kanbn-burndown-settings-input[type="date"]::-webkit-calendar-p
filter: invert(1);
}
.kanbn-header-button-inactive {
opacity: 0.6;
}
.kanbn-burndown {
height: 85vh;
width: 95vw;
@ -626,3 +642,153 @@ body.vscode-dark .kanbn-burndown-settings-input[type="date"]::-webkit-calendar-p
.kanbn-burndown-tooltip-task {
font-style: italic;
}
/*-----------------------------------------------------------------------------
Code block syntax highlighting styles
-----------------------------------------------------------------------------*/
body.vscode-dark code[class*="language-"] span.token.comment,
body.vscode-dark code[class*="language-"] span.token.prolog,
body.vscode-dark code[class*="language-"] span.token.cdata {
color: #808080;
}
body.vscode-dark code[class*="language-"] span.token.delimiter,
body.vscode-dark code[class*="language-"] span.token.boolean,
body.vscode-dark code[class*="language-"] span.token.keyword,
body.vscode-dark code[class*="language-"] span.token.selector,
body.vscode-dark code[class*="language-"] span.token.important,
body.vscode-dark code[class*="language-"] span.token.atrule {
color: #cc7832;
}
body.vscode-dark code[class*="language-"] span.token.operator,
body.vscode-dark code[class*="language-"] span.token.punctuation,
body.vscode-dark code[class*="language-"] span.token.attr-name {
color: #a9b7c6;
}
body.vscode-dark code[class*="language-"] span.token.tag,
body.vscode-dark code[class*="language-"] span.token.tag.punctuation,
body.vscode-dark code[class*="language-"] span.token.doctype,
body.vscode-dark code[class*="language-"] span.token.builtin {
color: #e8bf6a;
}
body.vscode-dark code[class*="language-"] span.token.entity,
body.vscode-dark code[class*="language-"] span.token.number,
body.vscode-dark code[class*="language-"] span.token.symbol {
color: #6897bb;
}
body.vscode-dark code[class*="language-"] span.token.property,
body.vscode-dark code[class*="language-"] span.token.constant,
body.vscode-dark code[class*="language-"] span.token.variable {
color: #9876aa;
}
body.vscode-dark code[class*="language-"] span.token.string,
body.vscode-dark code[class*="language-"] span.token.char {
color: #6a8759;
}
body.vscode-dark code[class*="language-"] span.token.attr-value,
body.vscode-dark code[class*="language-"] span.token.attr-value.punctuation {
color: #a5c261;
}
body.vscode-dark code[class*="language-"] span.token.attr-value.punctuation:first-child {
color: #a9b7c6;
}
body.vscode-dark code[class*="language-"] span.token.url {
color: #287bde;
}
body.vscode-dark code[class*="language-"] span.token.function {
color: #ffc66d;
}
body.vscode-dark code[class*="language-"] span.token.regex {
color: #364135;
}
body.vscode-dark code[class*="language-"] span.token.inserted {
color: #294436;
}
body.vscode-dark code[class*="language-"] span.token.deleted {
color: #484a4a;
}
body.vscode-dark code.language-css span.token.property,
body.vscode-dark code.language-css span.token.property + .token.punctuation {
color: #a9b7c6;
}
body.vscode-dark code.language-css span.token.id,
body.vscode-dark code.language-css .token.selector > .token.class,
body.vscode-dark code.language-css .token.selector > .token.attribute,
body.vscode-dark code.language-css .token.selector > .token.pseudo-class,
body.vscode-dark code.language-css .token.selector > .token.pseudo-element {
color: #ffc66d;
}
body.vscode-light code[class*="language-"] span.token.comment,
body.vscode-light code[class*="language-"] span.token.prolog,
body.vscode-light code[class*="language-"] span.token.doctype,
body.vscode-light code[class*="language-"] span.token.cdata {
color: #708090;
}
body.vscode-light code[class*="language-"] span.token.punctuation {
color: #999999;
}
body.vscode-light code[class*="language-"] span.token.namespace {
opacity: 0.7;
}
body.vscode-light code[class*="language-"] span.token.property,
body.vscode-light code[class*="language-"] span.token.tag,
body.vscode-light code[class*="language-"] span.token.boolean,
body.vscode-light code[class*="language-"] span.token.number,
body.vscode-light code[class*="language-"] span.token.constant,
body.vscode-light code[class*="language-"] span.token.symbol,
body.vscode-light code[class*="language-"] span.token.deleted {
color: #990055;
}
body.vscode-light code[class*="language-"] span.token.selector,
body.vscode-light code[class*="language-"] span.token.attr-name,
body.vscode-light code[class*="language-"] span.token.string,
body.vscode-light code[class*="language-"] span.token.char,
body.vscode-light code[class*="language-"] span.token.builtin,
body.vscode-light code[class*="language-"] span.token.inserted {
color: #669900;
}
body.vscode-light code[class*="language-"] span.token.operator,
body.vscode-light code[class*="language-"] span.token.entity,
body.vscode-light code[class*="language-"] span.token.url,
body.vscode-light code.language-css span.token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
body.vscode-light code[class*="language-"] span.token.atrule,
body.vscode-light code[class*="language-"] span.token.attr-value,
body.vscode-light code[class*="language-"] span.token.keyword {
color: #0077aa;
}
body.vscode-light code[class*="language-"] span.token.function,
body.vscode-light code[class*="language-"] span.token.class-name {
color: #dd4a68;
}
body.vscode-light code[class*="language-"] span.token.regex,
body.vscode-light code[class*="language-"] span.token.important,
body.vscode-light code[class*="language-"] span.token.variable {
color: #ee9900;
}