doc: Adding annotations support on highlight.js (#4186)

## Description

resolves #2740
closes #4157

> In order to give a better highlighting I picked the "meta" scope as
seen in [highlight.js
docs](https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html)
> 
> The ["Mode"
](https://highlightjs.readthedocs.io/en/latest/language-guide.html) I've
added provides the html class: _hljs-meta_ however, the result is a
white color for annotation (like plain text) and not a blue color as
requested in the issue.
> 
> The solution I've found for this is to add an additional css file to
specify custom behavior for the desired class. I haven't added this file
because I think it's out of scope.


## Checklist

- [✅ ] I have linked to any relevant issues.
- [ ?] I have commented my code, particularly in hard-to-understand
areas.
- [ ?] I have updated the documentation where relevant (API docs, the
reference, and the Sway book).
- [ ?] I have added tests that prove my fix is effective or that my
feature works.
- [✅] I have added (or requested a maintainer to add) the necessary
`Breaking*` or `New Feature` labels where relevant.
- [✅ ] I have done my best to ensure that my PR adheres to [the Fuel
Labs Code Review
Standards](https://github.com/FuelLabs/rfcs/blob/master/text/code-standards/external-contributors.md).
- [ ?] I have requested a review from the relevant team or maintainers.

Co-authored-by: Mohammad Fawaz <mohammadfawaz89@gmail.com>

scripts/highlightjs/sway.js

@@ -100,6 +100,10 @@ export default function(hljs) {
           }
         ]
       },
+      {
+        scope: 'meta',
+        match: /#\[.*\]/,
+      },
       {
         className: 'symbol',
         begin: /'[a-zA-Z_][a-zA-Z0-9_]*/