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”

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.
Line Markers
 
<button
  role="button"
  {...props}
  value={value}
  
  className={buttonClassName}
  
  disabled={disabled}
  active={active}
>
  {children &&
  
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>
Using Diff
--- 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
Using Diff and Lang
  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