- @ Expressive Code | Expressive Code (expressive-code.com)
- @ Languages | Shiki (matsu.io)
- ~ Dataview JS plugin, Shiki Highlighter Plugin, JS Engine plugin,
- @ RegExr: Learn, Build, & Test RegEx
- @ CodeMirror
Expressive Code
Showing Line Numbers
After code block markdown and language add “showLineNumbers”
Some inline code here...
Showing a Title
After code block markdown and language add “title=“Title Here”
Some inline code here...
Line Highlighting
After code block markdown and language add “del={2} ins={3-4} {6}”
- del={#} will show line/s as deleted in red
- ins={#} will show line/s as added in green
- {#} will show line/s in white as neutral
- Adding ”#”: before the number in {} will give a unique line marker. Does not work for multiple numbers separated by comma.
- To prevent overlap, provide an empty line at the specified location.
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+ this is an actual diff file
- all contents will remain unmodified
no whitespace will be removed either
function thisIsJavaScript() {
// This entire block gets highlighted as JavaScript,
// and we can still add diff markers to it!
- console.log('Old code to be removed')
+ console.log('New and shiny code!')
}
Regular Expressions
console.log('The words yes and yep will be marked.')
echo "Test" > /home/test.txt
Word Wrap
- After code block markdown and language type “wrap” or “wrap=false”.
- Setting “preserveIndent” will indent the text as it wraps. “preserveIndent=false” wont indent the text as it wraps.
// Example with wrap
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with wrap=false
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with preserveIndent (enabled by default)
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with preserveIndent=false
function getLongString() {
return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
Collapsible Sections
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// You can have multiple collapsed sections
const a = 1
const b = 2
return a + b
}
Other
import { createHighlighter } from 'shiki'
const myLang = JSON.parse(fs.readFileSync('jql.tmLanguage.json', 'utf8'))
const highlighter = await createHighlighter({
langs: [],
themes: ['vitesse-light'],
})
await highlighter.loadLanguage(myLang) // <--
const html = highlighter.codeToHtml(code, {
lang: 'my-lang',
theme: 'vitesse-light'
})
JQL
Default contenders: elm, genie, sql
project in (Blank) and status in (High) and (Text ~ "this" or Text ~ "that") order by ASC
< > "" changed was not in != ~ is order by asc desc assignee reporter created updatedby issuefunction
project in (Blank) and status in (High) and (Text ~ "this" or Text ~ "that") order by ASC
< > "" changed was not in != ~ is order by asc desc assignee reporter created updatedby issuefunction