|
| 1 | +# Language Contribution Guide |
| 2 | + |
| 3 | +So you'd like to create and share your own language definition for Highlight.js. That's awesome. |
| 4 | + |
| 5 | +## Getting started |
| 6 | + |
| 7 | +- [ ] Have a look at some real-life examples first |
| 8 | + - https://github.com/highlightjs/highlightjs-cypher |
| 9 | + - https://github.com/highlightjs/highlightjs-robots-txt |
| 10 | +- [ ] Clone the main [highlight-js](https://github.com/highlightjs/highlightjs) repository from GitHub |
| 11 | +- [ ] Read our [Language Contributor Checklist](https://highlightjs.readthedocs.io/en/latest/language-contribution.html) |
| 12 | +- [ ] Review the [Language Definition Guide](https://highlightjs.readthedocs.io/en/latest/language-guide.html) |
| 13 | +- [ ] Start with our [repository template](https://github.com/highlightjs/highlightjs-language-template) to more easily follow the suggested layout. (this isn't ready yet!) |
| 14 | + |
| 15 | +## Create your repository |
| 16 | + |
| 17 | +Each language is developed in its own repo. This helps keep language definitions and maintenance independent of the core work. |
| 18 | +Determine if you will host the repository yourself or you want it to be part of the [highlightjs organization on GitHub](https://github.com/highlightjs). |
| 19 | + |
| 20 | +> To host your new language with the highlightjs organization, [create an issue](https://github.com/highlightjs/highlight.js/issues/new/choose) using the language request template and provide a description of your language and your intent to host it. We will follow up in that issue. |
| 21 | +
|
| 22 | +Setup your directory structure to follow exactly the example(s) above. Note: The template repository does this for you, so if you started with the template you can skip this step. |
| 23 | + |
| 24 | +For example, if your grammar is named `apex`, create your repository directory structure as follows (renaming `apex` to match your language name of course. For example, if your language is `pascal`, then replace all occurrences of `apex` with `pascal`): |
| 25 | + |
| 26 | +- Put your language file in `src/languages/apex.js`. |
| 27 | +- Add detect tests in `test/detect/apex`. |
| 28 | +- Add markup tests in `test/markup/apex`. |
| 29 | +- Add a `package.json` file. |
| 30 | +- Add a `dist` folder (see [Packaging](#packaging), below.) |
| 31 | +- Include a LICENSE. |
| 32 | +- Include a README. |
| 33 | + |
| 34 | +## Testing |
| 35 | + |
| 36 | +Switching back to your clone of the `highlight-js` core repository now, `git clone` or symlink your language repo into the `extra` folder. There should now be an `extra/apex` folder for your language. |
| 37 | + |
| 38 | +> 3rd party language directories placed in `extra` should not be committed to the highlight-js repository (by default they are ignored, just don't override that behavior.) |
| 39 | +
|
| 40 | +To test (detect and markup tests), just build Highlight.js and test it. Your tests should be automatically run with the full suite: |
| 41 | + |
| 42 | +```bash |
| 43 | +node ./tools/build.js -t node |
| 44 | +npm run test |
| 45 | +``` |
| 46 | + |
| 47 | +Running the tests this way runs the complete suite of tests for all languages. You can set the `ONLY_EXTRA` environment variable to focus the tests on just the language(s) you are currently working on in the `extra` folder. |
| 48 | + |
| 49 | +```bash |
| 50 | +ONLY_EXTRA=true |
| 51 | +npm run test-markup |
| 52 | +``` |
| 53 | + |
| 54 | +*This currently only works for markup tests*, but those are the most common tests that need to be run while developing a language grammar. |
| 55 | + |
| 56 | +If you can't get the auto-detect tests passing then turn off auto-detection for your language in its definition with `disableAutodetect: true`. [Auto-detection is hard.](https://github.com/highlightjs/highlight.js/issues/1213) |
| 57 | + |
| 58 | +## Packaging |
| 59 | + |
| 60 | +Users will expect your package to include a minified CDN distributable in your `dist` folder. This allows them to add your language to their website using only a single `<script>` tag and no additional JavaScript. |
| 61 | + |
| 62 | +*The Highlight.js CDN build process will build this file for you automatically.* You can simply commit and push your repo, and done. |
| 63 | + |
| 64 | +```bash |
| 65 | +node ./tools/build.js -t cdn |
| 66 | + |
| 67 | +... |
| 68 | +Building extra/highlightjs-apex/dist/apex.min.js. |
| 69 | +... |
| 70 | +``` |
| 71 | + |
| 72 | +After building, simply commit the `dist/apex.min.js` that was generated for you inside your repository. |
| 73 | + |
| 74 | +``` |
| 75 | +cd extra/highlightjs-apex |
| 76 | +git add dist |
| 77 | +git commit -m'(chore) add CDN distributable` |
| 78 | +git push |
| 79 | +``` |
| 80 | + |
| 81 | +## Publishing |
| 82 | + |
| 83 | +We're happy to host 3rd party module repos inside the `highlightjs` organization on GitHub. Just [file an issue](https://github.com/highlightjs/highlight.js/issues/new/choose) and request a repository. |
| 84 | + |
| 85 | +Please also consider publishing your package to NPM. This will make it much easier for many using Node.js or bundlers to use your package. |
| 86 | + |
| 87 | +When your language definition is ready, create a PR that adds it to our [`SUPPORTED_LANGUAGES.md`](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) file. |
| 88 | + |
| 89 | +## The Future |
| 90 | + |
| 91 | +More work could be done on: |
| 92 | + |
| 93 | +- Allowing you to ONLY run your own tests, not the whole suite. |
| 94 | +- Allowing you to maintain a 3rd party module WITHOUT it being inside of a `highlight-js` checkout (this requires discussion though) |
| 95 | +- Simply make some easier tools or scripts to simply the existing process. |
0 commit comments