Languagefn | Annotative Code

languageFn - language functions (opens in a new tab) to highlight your content. Function that syntax highlights the content (code) you provide, brought to you by highlight.js (opens in a new tab).

Some programming languages include:

JavaScript
TypeScript
HTML (XML)
CSS
Python
Dart (Flutter)
Rust
...and so much more!

If your content is some plaintext, you can still use highlight.js' plaintext language function (opens in a new tab)

Usage:

🔎🔎🔎


const content = `// Using web component
import languageFn from 'annotative-code/bin/highlight.js/languages/____language____';
import 'annotative-code';`

const annotation = {
  "language": {
    "type": "string",
    "knob": "select",
    "options": [
      "javascript",
      "typescript",
      "xml",
      "css",
      "python",
      "dart",
      "rust"
    ],
    "value": "javascript"
  }
}

<annotative-code
  languageFn={languageFn}
  themeCss={themeCss}
  content={content}
  annotation={annotation}
/>

🔎🔎🔎


const content = `// Using React.js with the bridge component
// See more in "Getting Started > annotative-code > React"
// https://patrick-kw-chiu.github.io/annotative-code/getting-started/annotative-code/react
import languageFn from 'annotative-code/bin/highlight.js/languages/____language____';
import AnnotativeCode from './AnnotativeCode';`

const annotation = {
  "language": {
    "type": "string",
    "knob": "select",
    "options": [
      "javascript",
      "typescript",
      "xml",
      "css",
      "python",
      "dart",
      "rust"
    ],
    "value": "javascript"
  }
}

<AnnotativeCode
  languageFn={languageFn}
  themeCss={themeCss}
  content={content}
  annotation={annotation}
/>

Props * themeCss