Skip to content

Conversation

danielbodart
Copy link

This is my first pass at adding support for custom code extensions, these will allow you to add support for your favourite language or tool in side the markdown.

Inside the observablehq.config.ts file you can add handlers like so:

export default {
  codeExtensions: {
    'uppercase' : (content: string, attributes: Record<string, string>) => {
      return  `"${content.trim().toUpperCase()}"`;
    }
  }
}

Then in a markdown file you can simply say:

``` uppercase
hello world
```

And it will result in

HELLO WORLD

The example is pretty stupid, but this could easily allow clojure compilation to javascript or SQL for BigQuery etc.

The result of the function call returns valid JavaScript, that will be parsed by the parseJavaScript. This change simply inserts itself in the getLiveSource. To be honest the logic could easily be pulled one level up to makeFenceRenderer however this allows one to clearly see how this supports overriding the built in handlers if desired.

A later refactor could be to convert the built in code handlers into a default CodeExtensions object. Again I was trying to keep the changes to an absolute minimum to increase chance of acceptance (but totally open to feedback).

Probably the most important thing in this PR is the name of the config option codeExtensions, other options I thought about might be code, codeBlock, fenceCodeBlocks, languageBlocks, languageHandlers, tag etc. Please give feedback and I will update all references to the same name.

I also tried to follow the same code style of each file, again to maximise chance of acceptance.

Last I added a very simple test for the above uppercase examples, and ran all the tests, linter and typechecker before commiting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant