jupyterlab_github_markdown_alerts_extension 1.0.4

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, Stellars Henson
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,157 @@
+# JupyterLab GitHub Markdown Alerts Extension
+
+[![Github Actions Status](/workflows/Build/badge.svg)](/actions/workflows/build.yml)
+
+A JupyterLab 4 extension that renders GitHub-style alert blocks in Markdown cells, providing visual emphasis for notes, tips, warnings, and other important information.
+
+This extension brings GitHub's alert syntax to JupyterLab, allowing you to create styled callout blocks using simple markdown notation. Alerts automatically adapt to light and dark themes, matching GitHub's visual design.
+
+**Key Features**:
+- Five alert types - NOTE, TIP, IMPORTANT, WARNING, CAUTION
+- Automatic theme adaptation - colors adjust for light and dark modes
+- GitHub-compatible syntax - works with standard GitHub markdown alert notation
+- Icon integration - each alert type displays with its corresponding icon
+- Zero configuration - works immediately after installation
+
+## Requirements
+
+- JupyterLab >= 4.0.0
+
+## Usage
+
+Create alert blocks in markdown cells using GitHub's alert syntax. Start with a blockquote containing the alert type, followed by content lines:
+
+```
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
+Each alert type renders with distinct colors and icons matching GitHub's design. Multi-line content is supported by continuing the blockquote format.
+
+**Alert Examples**:
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+## Settings
+
+The extension provides optional settings accessible through JupyterLab's Settings Editor:
+
+- **Show Alert Backgrounds** - Enable subtle colored backgrounds for alerts (disabled by default to match GitHub exactly)
+
+To access settings: Settings → Settings Editor → GitHub Markdown Alerts
+
+## Install
+
+```bash
+pip install jupyterlab_github_markdown_alerts_extension
+```
+
+## Uninstall
+
+```bash
+pip uninstall jupyterlab_github_markdown_alerts_extension
+```
+
+## Contributing
+
+### Development install
+
+Note: You will need NodeJS to build the extension package.
+
+The `jlpm` command is JupyterLab's pinned version of
+[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
+`yarn` or `npm` in lieu of `jlpm` below.
+
+```bash
+# Clone the repo to your local environment
+# Change directory to the jupyterlab_github_markdown_alerts_extension directory
+
+# Set up a virtual environment and install package in development mode
+python -m venv .venv
+source .venv/bin/activate
+pip install --editable "."
+
+# Link your development version of the extension with JupyterLab
+jupyter labextension develop . --overwrite
+
+# Rebuild extension Typescript source after making changes
+# IMPORTANT: Unlike the steps above which are performed only once, do this step
+# every time you make a change.
+jlpm build
+```
+
+You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
+
+```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
+jlpm watch
+# Run JupyterLab in another terminal
+jupyter lab
+```
+
+With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
+
+By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
+
+```bash
+jupyter lab build --minimize=False
+```
+
+### Development uninstall
+
+```bash
+pip uninstall jupyterlab_github_markdown_alerts_extension
+```
+
+In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
+command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
+folder is located. Then you can remove the symlink named `jupyterlab_github_markdown_alerts_extension` within that folder.
+
+### Testing the extension
+
+#### Frontend tests
+
+This extension is using [Jest](https://jestjs.io/) for JavaScript code testing.
+
+To execute them, execute:
+
+```sh
+jlpm
+jlpm test
+```
+
+#### Integration tests
+
+This extension uses [Playwright](https://playwright.dev/docs/intro) for the integration tests (aka user level tests).
+More precisely, the JupyterLab helper [Galata](https://github.com/jupyterlab/jupyterlab/tree/master/galata) is used to handle testing the extension in JupyterLab.
+
+More information are provided within the [ui-tests](./ui-tests/README.md) README.
+
+### Packaging the extension
+
+See [RELEASE](RELEASE.md)

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+/**
+ * Initialization data for the jupyterlab_github_markdown_alerts_extension extension.
+ */
+declare const plugin: JupyterFrontEndPlugin<void>;
+export default plugin;

package/lib/index.js

@@ -0,0 +1,168 @@
+import { IMarkdownParser } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+const ALERT_TYPES = {
+    NOTE: {
+        className: 'markdown-alert-note',
+        title: 'Note',
+        iconClass: 'octicon-info',
+        iconColor: '#0969da',
+        iconColorDark: '#2f81f7',
+        iconPath: 'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
+    },
+    TIP: {
+        className: 'markdown-alert-tip',
+        title: 'Tip',
+        iconClass: 'octicon-light-bulb',
+        iconColor: '#1a7f37',
+        iconColorDark: '#3fb950',
+        iconPath: 'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
+    },
+    IMPORTANT: {
+        className: 'markdown-alert-important',
+        title: 'Important',
+        iconClass: 'octicon-report',
+        iconColor: '#8250df',
+        iconColorDark: '#a371f7',
+        iconPath: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+    },
+    WARNING: {
+        className: 'markdown-alert-warning',
+        title: 'Warning',
+        iconClass: 'octicon-alert',
+        iconColor: '#9a6700',
+        iconColorDark: '#d29922',
+        iconPath: 'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+    },
+    CAUTION: {
+        className: 'markdown-alert-caution',
+        title: 'Caution',
+        iconClass: 'octicon-stop',
+        iconColor: '#cf222e',
+        iconColorDark: '#f85149',
+        iconPath: 'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
+    }
+};
+/**
+ * Create SVG icon element as data URI with both light and dark theme versions
+ */
+function createIcon(iconPath, iconClass, iconColor, iconColorDark) {
+    // Create light theme icon
+    const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
+    const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
+    // Create dark theme icon
+    const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
+    const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
+    return (`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
+        `<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`);
+}
+/**
+ * Process markdown text to convert GitHub-style alerts
+ */
+function processAlerts(text) {
+    const lines = text.split('\n');
+    const result = [];
+    let i = 0;
+    let inCodeBlock = false;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Track code blocks (both ``` and ~~~)
+        if (line.trim().match(/^```|^~~~/)) {
+            inCodeBlock = !inCodeBlock;
+            result.push(line);
+            i++;
+            continue;
+        }
+        // Skip alert processing inside code blocks
+        if (inCodeBlock) {
+            result.push(line);
+            i++;
+            continue;
+        }
+        const alertMatch = line.match(/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/);
+        if (alertMatch) {
+            const alertType = alertMatch[1];
+            const contentLines = [];
+            i++;
+            while (i < lines.length && lines[i].startsWith('>')) {
+                const content = lines[i].replace(/^>\s?/, '');
+                if (content) {
+                    contentLines.push(content);
+                }
+                i++;
+            }
+            if (contentLines.length > 0) {
+                const content = contentLines.join('\n\n');
+                // Use HTML comments as markers that will survive markdown processing
+                result.push(`<!--ALERT_START:${alertType}-->`, content, `<!--ALERT_END:${alertType}-->`);
+                continue;
+            }
+        }
+        result.push(line);
+        i++;
+    }
+    return result.join('\n');
+}
+/**
+ * Post-process rendered HTML to wrap alert markers with styled divs
+ */
+function postProcessAlerts(html, showBackgrounds) {
+    // Replace alert markers with proper HTML structure
+    const result = html.replace(/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g, (match, alertType, content) => {
+        const config = ALERT_TYPES[alertType];
+        const icon = createIcon(config.iconPath, config.iconClass, config.iconColor, config.iconColorDark);
+        const backgroundClass = showBackgrounds
+            ? ' markdown-alert-with-backgrounds'
+            : '';
+        const alertHtml = `<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
+            `<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
+            content +
+            `</div>`;
+        console.log('Alert HTML generated:', alertHtml);
+        return alertHtml;
+    });
+    return result;
+}
+/**
+ * Initialization data for the jupyterlab_github_markdown_alerts_extension extension.
+ */
+const plugin = {
+    id: 'jupyterlab_github_markdown_alerts_extension:plugin',
+    description: 'Jupyterlab extension to render alerts tips like they are rendered in github in markdown',
+    autoStart: true,
+    requires: [IMarkdownParser],
+    optional: [ISettingRegistry],
+    activate: (app, markdownParser, settingRegistry) => {
+        let showBackgrounds = false;
+        // Load settings
+        if (settingRegistry) {
+            const loadSettings = () => {
+                settingRegistry
+                    .load(plugin.id)
+                    .then(settings => {
+                    showBackgrounds = settings.get('showBackgrounds')
+                        .composite;
+                    settings.changed.connect(() => {
+                        showBackgrounds = settings.get('showBackgrounds')
+                            .composite;
+                    });
+                })
+                    .catch(reason => {
+                    console.error('Failed to load settings for jupyterlab_github_markdown_alerts_extension', reason);
+                });
+            };
+            loadSettings();
+        }
+        const originalRender = markdownParser.render.bind(markdownParser);
+        markdownParser.render = async (content) => {
+            const processedContent = processAlerts(content);
+            console.log('Processed content:', processedContent);
+            const renderedHtml = await originalRender(processedContent);
+            console.log('Rendered HTML:', renderedHtml);
+            const finalHtml = postProcessAlerts(renderedHtml, showBackgrounds);
+            console.log('Final HTML:', finalHtml);
+            return finalHtml;
+        };
+        console.log('JupyterLab extension jupyterlab_github_markdown_alerts_extension is activated!');
+    }
+};
+export default plugin;

package/package.json

@@ -0,0 +1,197 @@
+{
+    "name": "jupyterlab_github_markdown_alerts_extension",
+    "version": "1.0.4",
+    "description": "Jupyterlab extension to render alerts tips like they are rendered in github in markdown",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/stellarshenson/jupyterlab_github_markdown_alerts_extension",
+    "bugs": {
+        "url": "https://github.com/stellarshenson/jupyterlab_github_markdown_alerts_extension/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Stellars Henson",
+        "email": "konrad.jelen@gmail.com"
+    },
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "src/**/*.{ts,tsx}"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "style": "style/index.css",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/stellarshenson/jupyterlab_github_markdown_alerts_extension.git"
+    },
+    "scripts": {
+        "build": "jlpm build:lib && jlpm build:labextension:dev",
+        "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+        "build:labextension": "jupyter labextension build .",
+        "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "jlpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+        "clean:labextension": "rimraf jupyterlab_github_markdown_alerts_extension/labextension jupyterlab_github_markdown_alerts_extension/_version.py",
+        "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+        "eslint": "jlpm eslint:check --fix",
+        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "install:extension": "jlpm build",
+        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+        "prettier": "jlpm prettier:base --write --list-different",
+        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "prettier:check": "jlpm prettier:base --check",
+        "stylelint": "jlpm stylelint:check --fix",
+        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+        "test": "jest --coverage",
+        "watch": "run-p watch:src watch:labextension",
+        "watch:src": "tsc -w --sourceMap",
+        "watch:labextension": "jupyter labextension watch ."
+    },
+    "dependencies": {
+        "@jupyterlab/application": "^4.0.0",
+        "@jupyterlab/rendermime": "^4.0.0",
+        "@jupyterlab/settingregistry": "^4.0.0"
+    },
+    "devDependencies": {
+        "@jupyterlab/builder": "^4.0.0",
+        "@jupyterlab/testutils": "^4.0.0",
+        "@types/jest": "^29.2.0",
+        "@types/json-schema": "^7.0.11",
+        "@types/react": "^18.0.26",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.2.0",
+        "npm-run-all2": "^7.0.1",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.10",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
+        "typescript": "~5.8.0",
+        "yjs": "^13.5.0"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "extension": true,
+        "outputDir": "jupyterlab_github_markdown_alerts_extension/labextension",
+        "schemaDir": "schema"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "dist",
+        "coverage",
+        "**/*.d.ts",
+        "tests",
+        "**/__tests__",
+        "ui-tests"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
+        }
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
+    },
+    "stylelint": {
+        "extends": [
+            "stylelint-config-recommended",
+            "stylelint-config-standard",
+            "stylelint-prettier/recommended"
+        ],
+        "plugins": [
+            "stylelint-csstree-validator"
+        ],
+        "rules": {
+            "csstree/validator": true,
+            "property-no-vendor-prefix": null,
+            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
+            "selector-no-vendor-prefix": null,
+            "value-no-vendor-prefix": null
+        }
+    }
+}

package/src/__tests__/jupyterlab_github_markdown_alerts_extension.spec.ts

@@ -0,0 +1,9 @@
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+
+describe('jupyterlab_github_markdown_alerts_extension', () => {
+  it('should be tested', () => {
+    expect(1 + 1).toEqual(2);
+  });
+});

package/src/index.ts

@@ -0,0 +1,246 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { IMarkdownParser } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+
+/**
+ * Alert type configuration
+ */
+interface IAlertConfig {
+  className: string;
+  title: string;
+  iconPath: string;
+  iconClass: string;
+  iconColor: string;
+  iconColorDark: string;
+}
+
+const ALERT_TYPES: Record<string, IAlertConfig> = {
+  NOTE: {
+    className: 'markdown-alert-note',
+    title: 'Note',
+    iconClass: 'octicon-info',
+    iconColor: '#0969da',
+    iconColorDark: '#2f81f7',
+    iconPath:
+      'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
+  },
+  TIP: {
+    className: 'markdown-alert-tip',
+    title: 'Tip',
+    iconClass: 'octicon-light-bulb',
+    iconColor: '#1a7f37',
+    iconColorDark: '#3fb950',
+    iconPath:
+      'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
+  },
+  IMPORTANT: {
+    className: 'markdown-alert-important',
+    title: 'Important',
+    iconClass: 'octicon-report',
+    iconColor: '#8250df',
+    iconColorDark: '#a371f7',
+    iconPath:
+      'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+  },
+  WARNING: {
+    className: 'markdown-alert-warning',
+    title: 'Warning',
+    iconClass: 'octicon-alert',
+    iconColor: '#9a6700',
+    iconColorDark: '#d29922',
+    iconPath:
+      'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+  },
+  CAUTION: {
+    className: 'markdown-alert-caution',
+    title: 'Caution',
+    iconClass: 'octicon-stop',
+    iconColor: '#cf222e',
+    iconColorDark: '#f85149',
+    iconPath:
+      'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
+  }
+};
+
+/**
+ * Create SVG icon element as data URI with both light and dark theme versions
+ */
+function createIcon(
+  iconPath: string,
+  iconClass: string,
+  iconColor: string,
+  iconColorDark: string
+): string {
+  // Create light theme icon
+  const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
+  const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
+
+  // Create dark theme icon
+  const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
+  const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
+
+  return (
+    `<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
+    `<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`
+  );
+}
+
+/**
+ * Process markdown text to convert GitHub-style alerts
+ */
+function processAlerts(text: string): string {
+  const lines = text.split('\n');
+  const result: string[] = [];
+  let i = 0;
+  let inCodeBlock = false;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Track code blocks (both ``` and ~~~)
+    if (line.trim().match(/^```|^~~~/)) {
+      inCodeBlock = !inCodeBlock;
+      result.push(line);
+      i++;
+      continue;
+    }
+
+    // Skip alert processing inside code blocks
+    if (inCodeBlock) {
+      result.push(line);
+      i++;
+      continue;
+    }
+
+    const alertMatch = line.match(
+      /^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/
+    );
+
+    if (alertMatch) {
+      const alertType = alertMatch[1];
+      const contentLines: string[] = [];
+
+      i++;
+      while (i < lines.length && lines[i].startsWith('>')) {
+        const content = lines[i].replace(/^>\s?/, '');
+        if (content) {
+          contentLines.push(content);
+        }
+        i++;
+      }
+
+      if (contentLines.length > 0) {
+        const content = contentLines.join('\n\n');
+
+        // Use HTML comments as markers that will survive markdown processing
+        result.push(
+          `<!--ALERT_START:${alertType}-->`,
+          content,
+          `<!--ALERT_END:${alertType}-->`
+        );
+        continue;
+      }
+    }
+
+    result.push(line);
+    i++;
+  }
+
+  return result.join('\n');
+}
+
+/**
+ * Post-process rendered HTML to wrap alert markers with styled divs
+ */
+function postProcessAlerts(html: string, showBackgrounds: boolean): string {
+  // Replace alert markers with proper HTML structure
+  const result = html.replace(
+    /<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g,
+    (match, alertType, content) => {
+      const config = ALERT_TYPES[alertType];
+      const icon = createIcon(
+        config.iconPath,
+        config.iconClass,
+        config.iconColor,
+        config.iconColorDark
+      );
+      const backgroundClass = showBackgrounds
+        ? ' markdown-alert-with-backgrounds'
+        : '';
+
+      const alertHtml =
+        `<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
+        `<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
+        content +
+        `</div>`;
+
+      console.log('Alert HTML generated:', alertHtml);
+      return alertHtml;
+    }
+  );
+  return result;
+}
+
+/**
+ * Initialization data for the jupyterlab_github_markdown_alerts_extension extension.
+ */
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab_github_markdown_alerts_extension:plugin',
+  description:
+    'Jupyterlab extension to render alerts tips like they are rendered in github in markdown',
+  autoStart: true,
+  requires: [IMarkdownParser],
+  optional: [ISettingRegistry],
+  activate: (
+    app: JupyterFrontEnd,
+    markdownParser: IMarkdownParser,
+    settingRegistry: ISettingRegistry | null
+  ) => {
+    let showBackgrounds = false;
+
+    // Load settings
+    if (settingRegistry) {
+      const loadSettings = () => {
+        settingRegistry
+          .load(plugin.id)
+          .then(settings => {
+            showBackgrounds = settings.get('showBackgrounds')
+              .composite as boolean;
+            settings.changed.connect(() => {
+              showBackgrounds = settings.get('showBackgrounds')
+                .composite as boolean;
+            });
+          })
+          .catch(reason => {
+            console.error(
+              'Failed to load settings for jupyterlab_github_markdown_alerts_extension',
+              reason
+            );
+          });
+      };
+      loadSettings();
+    }
+
+    const originalRender = markdownParser.render.bind(markdownParser);
+
+    markdownParser.render = async (content: string): Promise<string> => {
+      const processedContent = processAlerts(content);
+      console.log('Processed content:', processedContent);
+      const renderedHtml = await originalRender(processedContent);
+      console.log('Rendered HTML:', renderedHtml);
+      const finalHtml = postProcessAlerts(renderedHtml, showBackgrounds);
+      console.log('Final HTML:', finalHtml);
+      return finalHtml;
+    };
+
+    console.log(
+      'JupyterLab extension jupyterlab_github_markdown_alerts_extension is activated!'
+    );
+  }
+};
+
+export default plugin;

package/style/base.css

@@ -0,0 +1,189 @@
+/*
+ * GitHub-style markdown alerts
+ * Matches GitHub's exact styling from github.com
+ */
+
+.markdown-alert {
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
+  color: inherit;
+  border-left: 0.25em solid;
+}
+
+.markdown-alert > :first-child {
+  margin-top: 0;
+}
+
+.markdown-alert > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-alert .markdown-alert-title {
+  display: flex;
+  font-weight: 500;
+  align-items: center;
+  line-height: 1;
+}
+
+.octicon {
+  display: inline-block;
+  vertical-align: text-bottom;
+  flex-shrink: 0;
+}
+
+/* Show light theme icons by default, hide dark theme icons */
+.octicon-light {
+  display: inline-block;
+}
+
+.octicon-dark {
+  display: none;
+}
+
+/* In dark theme, show dark icons and hide light icons */
+body[data-jp-theme-light='false'] .octicon-light {
+  display: none;
+}
+
+body[data-jp-theme-light='false'] .octicon-dark {
+  display: inline-block;
+}
+
+.mr-2 {
+  margin-right: 8px;
+}
+
+/* Note - Blue */
+.markdown-alert-note {
+  border-left-color: #0969da;
+}
+
+.markdown-alert-note .markdown-alert-title {
+  color: #0969da;
+}
+
+/* Tip - Green */
+.markdown-alert-tip {
+  border-left-color: #1a7f37;
+}
+
+.markdown-alert-tip .markdown-alert-title {
+  color: #1a7f37;
+}
+
+/* Important - Purple */
+.markdown-alert-important {
+  border-left-color: #8250df;
+}
+
+.markdown-alert-important .markdown-alert-title {
+  color: #8250df;
+}
+
+/* Warning - Orange */
+.markdown-alert-warning {
+  border-left-color: #9a6700;
+}
+
+.markdown-alert-warning .markdown-alert-title {
+  color: #9a6700;
+}
+
+/* Caution - Red */
+.markdown-alert-caution {
+  border-left-color: #cf222e;
+}
+
+.markdown-alert-caution .markdown-alert-title {
+  color: #cf222e;
+}
+
+/* Dark theme support */
+body[data-jp-theme-light='false'] .markdown-alert-note {
+  border-left-color: #2f81f7;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-note .markdown-alert-title {
+  color: #2f81f7;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-tip {
+  border-left-color: #3fb950;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-tip .markdown-alert-title {
+  color: #3fb950;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-important {
+  border-left-color: #a371f7;
+}
+
+body[data-jp-theme-light='false']
+  .markdown-alert-important
+  .markdown-alert-title {
+  color: #a371f7;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-warning {
+  border-left-color: #d29922;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-warning .markdown-alert-title {
+  color: #d29922;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-caution {
+  border-left-color: #f85149;
+}
+
+body[data-jp-theme-light='false'] .markdown-alert-caution .markdown-alert-title {
+  color: #f85149;
+}
+
+/* Optional backgrounds (enabled via settings) */
+.markdown-alert-with-backgrounds.markdown-alert-note {
+  background-color: rgba(9, 105, 218, 0.1);
+}
+
+.markdown-alert-with-backgrounds.markdown-alert-tip {
+  background-color: rgba(26, 127, 55, 0.1);
+}
+
+.markdown-alert-with-backgrounds.markdown-alert-important {
+  background-color: rgba(130, 80, 223, 0.1);
+}
+
+.markdown-alert-with-backgrounds.markdown-alert-warning {
+  background-color: rgba(154, 103, 0, 0.1);
+}
+
+.markdown-alert-with-backgrounds.markdown-alert-caution {
+  background-color: rgba(209, 36, 47, 0.1);
+}
+
+/* Dark theme backgrounds */
+body[data-jp-theme-light='false']
+  .markdown-alert-with-backgrounds.markdown-alert-note {
+  background-color: rgba(47, 129, 247, 0.15);
+}
+
+body[data-jp-theme-light='false']
+  .markdown-alert-with-backgrounds.markdown-alert-tip {
+  background-color: rgba(63, 185, 80, 0.15);
+}
+
+body[data-jp-theme-light='false']
+  .markdown-alert-with-backgrounds.markdown-alert-important {
+  background-color: rgba(163, 113, 247, 0.15);
+}
+
+body[data-jp-theme-light='false']
+  .markdown-alert-with-backgrounds.markdown-alert-warning {
+  background-color: rgba(210, 153, 34, 0.15);
+}
+
+body[data-jp-theme-light='false']
+  .markdown-alert-with-backgrounds.markdown-alert-caution {
+  background-color: rgba(248, 81, 73, 0.15);
+}

package/style/index.css

@@ -0,0 +1 @@
+@import url('base.css');

package/style/index.js

@@ -0,0 +1 @@
+import './base.css';