search

josephbergevin / codebook-md

Bring your markdown to life with this VS Code extension. Execute code blocks at the click of a button in a notebook style similar to Jupyter. GitHub permalinks will show a preview and can be clicked to navigate to the file/line locally.
MIT License
2 stars 0 forks source link

activityBar: implement a web view for helpers and examples #20

Open josephbergevin opened 1 month ago

josephbergevin commented 1 month ago 

export function activate(context: vscode.ExtensionContext) {
    // Create and show a new webview panel
    const panel = vscode.window.createWebviewPanel(
        'markdownPreview', // Identifies the type of the webview. Used internally
        'Markdown Preview', // Title of the panel displayed to the user
        vscode.ViewColumn.One, // Editor column to show the new webview panel in.
        {} // Webview options.
    );

    // Set the webview's initial HTML content
    panel.webview.html = getWebviewContent();

    // Listen for messages from the webview
    panel.webview.onDidReceiveMessage(
        message => {
            switch (message.command) {
                case 'hover':
                    console.log(`Hovered over: ${message.text}`);
                    // Handle the hover event. For example, show a message box.
                    vscode.window.showInformationMessage(`Hovered over: ${message.text}`);
                    break;
            }
        },
        undefined,
        context.subscriptions
    );

    // Add to context.subscriptions if needed, for cleanup
    context.subscriptions.push(panel);
}

function getWebviewContent() {
    // Return HTML content with a script that posts messages back to the extension
    // when a hover event occurs in the webview
    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Preview</title>
</head>
<body>
    <p id="markdownContent">Hover over me!</p>
    <script>
        const vscode = acquireVsCodeApi();
        const markdownContent = document.getElementById('markdownContent');
        markdownContent.addEventListener('mouseover', () => {
            vscode.postMessage({
                command: 'hover',
                text: 'You hovered over the markdown content!'
            });
        });
    </script>
</body>
</html>`;
}