VSCode Extension Development - Hexo Snippet Paste Tool for Fluid

A VSCode extension which allows pasting code snippets automatically

Microsoft Marketplace Extension Github repository

Screenshots

Project Description

This extension is tailored for Hexo users utilizing the Fluid theme, providing automatic template snippet pasting.

Using

• TypeScript
• Git
• Nodejs

Key Features

• Open source
• Paste snippet by typing and choosing the commands

Code Showcase

Extension main entry

import * as vscode from 'vscode';
import { youtubeEmbedPaste } from './util/youtubeEmbed';
import { foldBlock } from './util/foldBlock';
import { note } from './util/note';
import { label } from './util/label';
import { checkBox } from './util/checkBox';
import { button } from './util/button';
import { groupImages } from './util/groupImages';
import { mermaid } from './util/mermaid';

export function activate(context: vscode.ExtensionContext) {

	// Register multiple commands
	let youtubeEmbedCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteYoutubeEmbed', () => {
		youtubeEmbedPaste();
	});

	let foldBlockCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteFoldBlock', () => {
		foldBlock();
	});

	let noteCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteNote', () => {
		note();
	});

	let labelCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteLabel', () => {
		label();
	});

	let checkBoxCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteCheckBox', () => {
		checkBox();
	});

	let buttonCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteButton', () => {
		button();
	});

	let groupImagesCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteGroupImages', () => {
		groupImages();		
	});

	let mermaidCommand = vscode.commands.registerCommand('hexo-snippet-paste-tool-for-fluid.pasteMermaid', () => {
		mermaid();
	});


	// Add the commands to the context
	context.subscriptions.push(youtubeEmbedCommand);
	context.subscriptions.push(foldBlockCommand);
	context.subscriptions.push(noteCommand);
	context.subscriptions.push(labelCommand);
	context.subscriptions.push(checkBoxCommand);
	context.subscriptions.push(buttonCommand);
	context.subscriptions.push(groupImagesCommand);
	context.subscriptions.push(mermaidCommand);
}

// This method is called when your extension is deactivated
export function deactivate() { }

Pasting Note Function

// Pasting "note"
import * as vscode from 'vscode';

export async function note() {
    // Obtain the active text editor
    const editor = vscode.window.activeTextEditor;
    if (!editor) {return;}

    // UI for Width and Height Input
    vscode.window.showInputBox({
        value: 'info',
        prompt: 'Type in the type of the note (e.g., primary, default, info, success, warning, danger)'
    }).then(input => {
        // When user provide any input
        if (input) {

            // Prepare the fold block content
            const content = prepareNote(input);

            // Inserting the content to the editor
            editor.edit(editBuilder => {
                editBuilder.insert(editor.selection.active, content);
            });
        }
    });
}

function prepareNote(type: string): string {
    // Modify the fold block content with the specified type and title
    return `{% note ${type} %}\n\n{% endnote %}`;
}