diff --git a/build/api-docs-generator.js b/build/api-docs-generator.js
index 8ae9a1e0a8..abb4dd69f8 100644
--- a/build/api-docs-generator.js
+++ b/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`;
         }
 
diff --git a/src/NodeConnector.js b/src/NodeConnector.js
index 49f53e2587..472f2830f9 100644
--- a/src/NodeConnector.js
+++ b/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,6 +69,7 @@
  *
  * 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');
@@ -74,6 +77,7 @@
  *
  * 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
diff --git a/src/features/BeautificationManager.js b/src/features/BeautificationManager.js
index 06601e730d..9198879038 100644
--- a/src/features/BeautificationManager.js
+++ b/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) {
diff --git a/src/features/NewFileContentManager.js b/src/features/NewFileContentManager.js
index b02894ddfb..28b4ed21ab 100644
--- a/src/features/NewFileContentManager.js
+++ b/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
diff --git a/src/features/QuickViewManager.js b/src/features/QuickViewManager.js
index 6e3e6291ac..764afc568e 100644
--- a/src/features/QuickViewManager.js
+++ b/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) {
diff --git a/src/features/SelectionViewManager.js b/src/features/SelectionViewManager.js
index 8caedb34ba..31aa1887c1 100644
--- a/src/features/SelectionViewManager.js
+++ b/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) {
diff --git a/src/utils/EventDispatcher.js b/src/utils/EventDispatcher.js
index 3a97858e2f..36a48bfad3 100644
--- a/src/utils/EventDispatcher.js
+++ b/src/utils/EventDispatcher.js
@@ -55,11 +55,13 @@
  *
  * ## 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
@@ -67,6 +69,7 @@
  * ```
  *
  * 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) {
diff --git a/src/utils/EventManager.js b/src/utils/EventManager.js
index f20884c102..4dbc79c182 100644
--- a/src/utils/EventManager.js
+++ b/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", ...);
  * ```
diff --git a/src/utils/ExtensionInterface.js b/src/utils/ExtensionInterface.js
index 7ab33ce419..6f1dfd345f 100644
--- a/src/utils/ExtensionInterface.js
+++ b/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);
diff --git a/src/utils/FeatureGate.js b/src/utils/FeatureGate.js
index 3c917ec521..dccf616d84 100644
--- a/src/utils/FeatureGate.js
+++ b/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
diff --git a/src/utils/Metrics.js b/src/utils/Metrics.js
index f481095773..40086c18f4 100644
--- a/src/utils/Metrics.js
+++ b/src/utils/Metrics.js
@@ -28,6 +28,7 @@
  *`Status: Internal - Not to be used by third party extensions.`
  *
  * ### Import
+ * @example
  * ```js
  * // usage within core:
  * const Metrics = require("utils/Metrics");
diff --git a/src/widgets/NotificationUI.js b/src/widgets/NotificationUI.js
index a9e25d7fae..e680d7279b 100644
--- a/src/widgets/NotificationUI.js
+++ b/src/widgets/NotificationUI.js
@@ -31,6 +31,7 @@
  * ### Simple example
  * For Eg. Let's say we have to create a popup notification over the HTML element with ID `showInfileTree`.
  * We can do this with the following
+ * @example
  * ```js
  * const NotificationUI = brackets.getModule("widgets/NotificationUI");
  * // or use window.NotificationUI global object has the same effect.
@@ -41,6 +42,7 @@
  * ```
  * ### Advanced example
  * Another advanced example where you can specify html and interactive components in the notification
+ * @example
  * ```js
  * // note that you can even provide an HTML Element node with
  * // custom event handlers directly here instead of HTML text.
@@ -55,7 +57,7 @@
  *     console.log("notification is closed in ui reason:", closeReason);
  * })
  * ```
- * The [createFromTemplate]() API can be configured with numerous options. See API options below.
+ * The [createFromTemplate](1) API can be configured with numerous options. See API options below.
  * @module widgets/NotificationUI
  */
 
diff --git a/src/worker/IndexingWorker.js b/src/worker/IndexingWorker.js
index 66613b2119..d61052211a 100644
--- a/src/worker/IndexingWorker.js
+++ b/src/worker/IndexingWorker.js
@@ -33,6 +33,7 @@
  *   [worker/WorkerComm](WorkerComm-API) to communicate with the web worker.
  *
  * ## Import
+ * @example
  * ```js
  * // usage within extensions:
  * const IndexingWorker = brackets.getModule("worker/IndexingWorker");
@@ -46,6 +47,7 @@
  * │  main.js
  * ```
  * In `main.js` extension module, we can import `my_worker.js` script into `IndexingWorker` by:
+ * @example
  * ```js
  * let ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
  * let workerPath = ExtensionUtils.getModulePath(module, "my_worker.js")
diff --git a/src/worker/WorkerComm.js b/src/worker/WorkerComm.js
index a31a54c1a8..e302d73023 100644
--- a/src/worker/WorkerComm.js
+++ b/src/worker/WorkerComm.js
@@ -27,6 +27,7 @@
  * ## Import
  * ### Creating a WebWorker from your extension and attaching `WorkerComm` to it.
  * See an example extension code below that creates its own web worker and uses `WorkerComm` for communication.
+ * @example
  * ```js
  * // from within an extension
  * const WorkerComm = brackets.getModule("worker/WorkerComm"),
@@ -58,6 +59,7 @@
  * The Web Worker we created above also needs to load `WorkerComm` to be able to communicate with the `WorkerComm`
  * instance in Phoenix. For this, we need to load `WorkerComm` from the URL parameters.
  * (WorkerComm.js lib url needs to passed in while creating the web worker from Phoenix).
+ * @example
  * ```js
  * const urlParams = new URLSearchParams(location.search);
  * importScripts(urlParams.get('workerCommUrl'));