fix: syntax highlighting in docs site

Author: devvaannsh

build/api-docs-generator.js

@@ -461,13 +461,13 @@ function mdxFileModifications() {
         // for example NodeConnector.mdx
         if (directoryName.endsWith('.mdx')) {
             importStatement =
-                `### Import :\n\`\`\`\n` +
+                `### Import :\n\`\`\`js\n` +
                 `brackets.getModule("${fileNameWithoutExt}")\n` +
                 `\`\`\`\n`;
         } else {
             importStatement =
-                `### Import :\n\`\`\`\n` +
-                `brackets.getModule("${directoryName}/${fileNameWithoutExt}")\n` +
+                `### Import :\n\`\`\`js\n` +
+                `brackets.getModule("${fileNameWithoutExt}")\n` +
                 `\`\`\`\n`;
         }
 

src/NodeConnector.js

@@ -35,6 +35,7 @@
  *
  * ### Create `NodeConnector` in Phoenix (`x.js`)
  *
+ * @example
  * ```js
  * const NodeConnector = require('NodeConnector');
  * const XY_NODE_CONNECTOR_ID = 'ext_x_y'; // Use a unique ID
@@ -52,6 +53,7 @@
  *
  * ### Create `NodeConnector` in Node.js (`y.js`)
  *
+ * @example
  * ```js
  * const XY_NODE_CONNECTOR_ID = 'ext_x_y'; // Use the same unique ID
  * let nodeConnector = global.createNodeConnector(XY_NODE_CONNECTOR_ID, exports);
@@ -67,13 +69,15 @@
  *
  * To call a Node.js function from Phoenix, use the `execPeer` method.
  *
+ * @example
  * ```js
  * // In `x.js` (Phoenix)
  * const fullPath = await nodeConnector.execPeer('getPWDRelative', 'sub/path.html');
  * ```
  *
  * To execute a Phoenix function from Node.js and transfer binary data, pass an optional ArrayBuffer.
  *
+ * @example
  * ```js
  * // In `y.js` (Node.js)
  * const { operationDone, buffer } = await nodeConnector.execPeer('modifyImage', {name:'theHills.png'}, imageAsArrayBuffer);
@@ -84,6 +88,7 @@
  * The `NodeConnector` object implements all the APIs supported by `utils/EventDispatcher`. You can trigger and listen
  * to events between Node.js and Phoenix using the `triggerPeer` and (`on`, `one` or `off`) methods.
  *
+ * @example
  * ```js
  * // In `y.js` (Node.js)
  * nodeConnector.on('phoenixProjectOpened', (_event, projectPath) => {
@@ -97,12 +102,14 @@
  *
  * To raise an event from Phoenix to Node.js:
  *
+ * @example
  * ```js
  * // In `x.js` (Phoenix)
  * nodeConnector.triggerPeer('phoenixProjectOpened', '/x/project/folder');
  * ```
  *
  * To Switch off events
+ * @example
  * ```js
  * nodeConnector.off('phoenixProjectOpened'); // will switch off all event handlers of that name.
  * ```
@@ -117,6 +124,7 @@
  *
  * Example of calling a function in Node.js with binary data transfer:
  *
+ * @example
  * ```js
  * // In `y.js` (Node.js)
  * const { operationDone, buffer } = await nodeConnector.execPeer('modifyImage', {name:'name.png'}, imageArrayBuffer);
@@ -128,6 +136,7 @@
  *
  * Example of sending binary data in an event from Phoenix to Node.js:
  *
+ * @example
  * ```js
  * // In `x.js` (Phoenix)
  * const imageArrayBuffer = getSomeImageArrayBuffer(); // Get the ArrayBuffer

src/features/BeautificationManager.js

@@ -27,6 +27,7 @@
  * ### registerBeautificationProvider
  * Register a Beautification provider with this api.
  *
+ * @example
  * ```js
  * // syntax
  * BeautificationManager.registerBeautificationProvider(provider, supportedLanguages, priority);
@@ -38,6 +39,7 @@
  * 1. `priority`: Used to break ties among providers for a particular language. Providers with a higher number
  *     will be asked for beatified code before those with a lower priority value. Defaults to zero.
  *
+ * @example
  * ```js
  * // to register a provider that will be invoked for all languages. where provider is any object that implements
  * // a `beautifyEditorProvider` and `beautifyTextProvider` function
@@ -49,6 +51,8 @@
  *
  * ### removeBeautificationProvider
  * Removes a registered Beautification provider. The API takes the same arguments as `registerBeautificationProvider`.
+ *
+ * @example
  * ```js
  * // syntax
  * BeautificationManager.removeBeautificationProvider(provider, supportedLanguages);
@@ -59,6 +63,8 @@
  * ### provider.beautifyEditorProvider
  * Each provider must implement the `beautifyEditorProvider` function that returns a promise. The promise either resolves with
  * the beautified code details or rejects if there is nothing to beautify for the provider.
+ *
+ * @example
  * ```js
  * // function signature
  * provider.beautifyEditorProvider = function(editor) {
@@ -97,6 +103,8 @@
  * Each provider must implement the `beautifyTextProvider` function that returns a promise.
  * The promise either resolves with the beautified code details(same as beautifyEditorProvider) or rejects if
  * there is nothing to beautify for the provider.
+ *
+ * @example
  * ```js
  * // function signature.
  * provider.beautifyTextProvider = function(textToBeautify, filePathOrFileName) {

src/features/NewFileContentManager.js

@@ -28,6 +28,8 @@
  *
  * ## Usage
  * Let's say whenever a user creates a new js file, we have to prefill the contents to "sample content"
+ *
+ * @example
  * ```js
  * const NewFileContentManager = brackets.getModule("features/NewFileContentManager");
  * // replace `js` with language ID(Eg. javascript) if you want to restrict the preview to js files only. use `all` for
@@ -48,6 +50,7 @@
  * ### registerContentProvider
  * Register a Content provider with this api.
  *
+ * @example
  * ```js
  * // syntax
  * NewFileContentManager.registerContentProvider(provider, supportedLanguages, priority);
@@ -59,6 +62,7 @@
  * 1. `priority`: Contents provided hy providers with higher priority will win if there are more than
  *    one provider registered for the language. Default is 0.
  *
+ * @example
  * ```js
  * // to register a provider that will be invoked for all languages. where provider is any object that implements
  * // a getContent function
@@ -70,6 +74,8 @@
  *
  * ### removeContentProvider
  * Removes a registered content provider. The API takes the same arguments as `registerContentProvider`.
+ *
+ * @example
  * ```js
  * // syntax
  * NewFileContentManager.removeContentProvider(provider, supportedLanguages);
@@ -80,6 +86,8 @@
  * ### provider.getContent
  * Each provider must implement the `getContent` function that returns a promise. The promise either resolves with
  * the content text or rejects if there is no content made available by the provider.
+ *
+ * @example
  * ```js
  * exports.CONTENT_PROVIDER_NAME = "extension.someName"; // for debugging
  * // function signature

src/features/QuickViewManager.js

@@ -40,6 +40,8 @@
  * ## Usage
  * Lets build a "hello world" extension that displays "hello world" on hover over a text in the editor.
  * In your extension file, add the following code:
+ *
+ * @example
  * ```js
  * const QuickViewManager = brackets.getModule("features/QuickViewManager");
  * // replace `all` with language ID(Eg. javascript) if you want to restrict the preview to js files only.
@@ -77,6 +79,7 @@
  * ### registerQuickViewProvider
  * Register a QuickView provider with this api.
  *
+ * @example
  * ```js
  * // syntax
  * QuickViewManager.registerQuickViewProvider(provider, supportedLanguages);
@@ -86,6 +89,8 @@
  * 1. `supportedLanguages`: An array of languages that the QuickView supports. If `["all"]` is supplied, then the
  *    QuickView will be invoked for all languages. Restrict to specific languages: Eg: `["javascript", "html", "php"]`
  *
+ *
+ * @example
  * ```js
  * // to register a provider that will be invoked for all languages. where provider is any object that implements
  * // a getQuickView function
@@ -97,6 +102,8 @@
  *
  * ### removeQuickViewProvider
  * Removes a registered QuickView provider. The API takes the same arguments as `registerQuickViewProvider`.
+ *
+ * @example
  * ```js
  * // syntax
  * QuickViewManager.removeQuickViewProvider(provider, supportedLanguages);
@@ -107,6 +114,8 @@
  * ### getQuickView
  * Each provider must implement the `getQuickView` function that returns a promise. The promise either resolves with
  * the quick view details object(described below) or rejects if there is no preview for the position.
+ *
+ * @example
  * ```js
  * // function signature
  * provider.getQuickView = function(editor, pos, token, line) {
@@ -156,6 +165,8 @@
  * Each provider can optionally implement the `filterQuickView` function to control what among the available
  * quick views should be rendered if multiple providers responded with a QuickView. The function will be called
  * once all `getQuickView` providers provided a valid preview object.
+ *
+ * @example
  * ```js
  * // function signature
  * provider.filterQuickView = function(popovers) {

src/features/SelectionViewManager.js

@@ -41,6 +41,8 @@
  * ## Usage
  * Lets build a "hello world" extension that displays "hello world" above selected text in the editor.
  * In your extension file, add the following code:
+ *
+ * @example
  * ```js
  * const SelectionViewManager = brackets.getModule("features/SelectionViewManager");
  * // replace `all` with language ID(Eg. javascript) if you want to restrict the preview to js files only.
@@ -69,6 +71,7 @@
  * ### registerSelectionViewProvider
  * Register a SelectionView provider with this api.
  *
+ * @example
  * ```js
  * // syntax
  * SelectionViewManager.registerSelectionViewProvider(provider, supportedLanguages);
@@ -78,6 +81,7 @@
  * 1. `supportedLanguages`: An array of languages that the SelectionView supports. If `["all"]` is supplied, then the
  *    SelectionView will be invoked for all languages. Restrict to specific languages: Eg: `["javascript", "html", "php"]`
  *
+ * @example
  * ```js
  * // to register a provider that will be invoked for all languages. where provider is any object that implements
  * // a getSelectionView function
@@ -89,6 +93,8 @@
  *
  * ### removeSelectionViewProvider
  * Removes a registered SelectionView provider. The API takes the same arguments as `registerSelectionViewProvider`.
+ *
+ * @example
  * ```js
  * // syntax
  * SelectionViewManager.removeSelectionViewProvider(provider, supportedLanguages);
@@ -99,6 +105,8 @@
  * ### getSelectionView
  * Each provider must implement the `getSelectionView` function that returns a promise. The promise either resolves with
  * the Selection View details object(described below) or rejects if there is no preview for the position.
+ *
+ * @example
  * ```js
  * // function signature
  * provider.getSelectionView = function(editor, selections) {

src/utils/EventDispatcher.js

@@ -55,18 +55,21 @@
  *
  * ## Usage
  * ### Importing from an extension
+ * @example
  * ```js
  * const EventDispatcher = brackets.getModule("utils/EventDispatcher");
  * ```
  * ### Using the global object
  * The EventDispatcher Object is available within the global context, be it phoenix or phoenix core web workers or node.
+ * @example
  * ```js
  * window.EventDispatcher.makeEventDispatcher(exports); // within phoenix require module
  * self.EventDispatcher.makeEventDispatcher(object); // within web worker
  * global.EventDispatcher.makeEventDispatcher(exports); // within node module that has an export
  * ```
  *
  * If you wish to import event dispatcher to your custom web worker, use the following
+ * @example
  * ```js
  * importScripts('<relative path from your extension>/utils/EventDispatcher');
  * // this will add the global EventDispatcher to your web-worker. Note that the EventDispatcher in the web worker
@@ -76,6 +79,7 @@
  * self.EventDispatcher.trigger("someEvent"); // within web worker
  * ```
  * ### Sample Usage within extension
+ * @example
  * ```js
  * // in your extension js file.
  * define (function (require, exports, module) {

src/utils/EventManager.js

@@ -33,6 +33,7 @@
  * ## Usage
  * For Eg. Let's say we have an extension `drawImage` installed that wants to expose custom functionality to phoenix.
  * The Extension will first register named EventHandler like this:
+ * @example
  * ```js
  * // in drawImage/someExtensionModule.js module within the extension, do the following:
  * const EventDispatcher = brackets.getModule("utils/EventDispatcher"),
@@ -44,6 +45,7 @@
  * Once the event handler is registered, we can trigger events on the named handler anywhere in phoenix
  * (inside or outside the extension) by using:
  *
+ * @example
  * ```js
  * EventManager.triggerEvent("drawImage-Handler", "someEventName", "param1", "param2", ...);
  * ```

src/utils/ExtensionInterface.js

@@ -34,6 +34,7 @@
  * For Making this possible, the `angular-cli` extension makes a named interface available with the ExtensionInterface
  * module and `angular` extension can get hold of the interface as and when the extension gets loaded.
  *
+ * @example
  * ```js
  * // in angular-cli extension, make a file say cli-interface.js module within the extension, do the following:
  * const ExtensionInterface = brackets.getModule("utils/ExtensionInterface"),
@@ -43,6 +44,7 @@
  * Once the interface is registered, the angular extension can get hold of the interface with the following code
  * (inside or outside the extension) by using:
  *
+ * @example
  * ```js
  * let angularCli;
  * ExtensionInterface.waitAndGetExtensionInterface("angularCli").then(interfaceObj=> angularCli = interfaceObj);

src/utils/FeatureGate.js

@@ -33,6 +33,7 @@
  * so that only people who want to test the extension will be able to use it.
  *
  * ### creating a feature gate
+ * @example
  * ```js
  * // within extensions
  * const FeatureGate = brackets.getModule("utils/FeatureGate"); // replace with `require` for core modules.
@@ -44,6 +45,7 @@
  * Once the feature is registered, use the below code to check if the feature can be safely enabled. For Eg., if
  * you want to enable fancy colors based on the example above:
  *
+ * @example
  * ```js
  * if(FeatureGate.isFeatureEnabled(FEATURE_NEW_COLORS)){
  *    // do fancy colors here