@@ -33,6 +33,7 @@
 "onCommand:leetcode.createSession",
 "onCommand:leetcode.refreshExplorer",
 "onCommand:leetcode.showProblem",
+"onCommand:leetcode.previewProblem",
 "onCommand:leetcode.searchProblem",
 "onCommand:leetcode.testSolution",
 "onCommand:leetcode.submitSolution",
@@ -94,6 +95,11 @@
 "title": "Show Problem",
 "category": "LeetCode"
 },
+{
+"command": "leetcode.previewProblem",
+"title": "Preview Problem",
+"category": "LeetCode"
+},
 {
 "command": "leetcode.searchProblem",
 "title": "Search Problem",
@@ -164,12 +170,21 @@
 "command": "leetcode.showProblem",
 "when": "view == leetCodeExplorer && viewItem == problem",
 "group": "leetcode@1"
+},
+{
+"command": "leetcode.previewProblem",
+"when": "view == leetCodeExplorer && viewItem == problem",
+"group": "leetcode@1"
 }
 ],
 "commandPalette": [
 {
 "command": "leetcode.showProblem",
 "when": "never"
+},
+{
+"command": "leetcode.previewProblem",
+"when": "never"
 }
 ],
 "explorer/context": [

@@ -1,6 +1,7 @@
 // Copyright (c) jdneo. All rights reserved.
 // Licensed under the MIT license.
 
+import { Command } from "vscode";
 import { IProblem, ProblemState } from "../shared";
 
 export class LeetCodeNode {
@@ -48,4 +49,13 @@ export class LeetCodeNode {
 public get parentName(): string {
 return this.parentNodeName;
 }
+
+public get previewCommand(): Command {
+return {
+title: "Preview Problem",
+command: "leetcode.previewProblem",
+arguments: [this],
+};
+}
+
 }

@@ -52,6 +52,7 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod
 collapsibleState: element.isProblem ? vscode.TreeItemCollapsibleState.None : vscode.TreeItemCollapsibleState.Collapsed,
 contextValue: element.isProblem ? "problem" : element.id.toLowerCase(),
 iconPath: this.parseIconPathFromProblemState(element),
+command: element.isProblem ? element.previewCommand : undefined,
 };
 }
 

@@ -15,6 +15,7 @@ import { LeetCodeTreeDataProvider } from "./explorer/LeetCodeTreeDataProvider";
 import { leetCodeChannel } from "./leetCodeChannel";
 import { leetCodeExecutor } from "./leetCodeExecutor";
 import { leetCodeManager } from "./leetCodeManager";
+import { leetCodePreviewProvider } from "./leetCodePreviewProvider";
 import { leetCodeResultProvider } from "./leetCodeResultProvider";
 import { leetCodeStatusBarItem } from "./leetCodeStatusBarItem";
 
@@ -29,11 +30,13 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
 });
 
 const leetCodeTreeDataProvider: LeetCodeTreeDataProvider = new LeetCodeTreeDataProvider(context);
+leetCodePreviewProvider.initialize(context);
 leetCodeResultProvider.initialize(context);
 
 context.subscriptions.push(
 leetCodeStatusBarItem,
 leetCodeChannel,
+leetCodePreviewProvider,
 leetCodeResultProvider,
 vscode.window.createTreeView("leetCodeExplorer", { treeDataProvider: leetCodeTreeDataProvider, showCollapseAll: true }),
 vscode.languages.registerCodeLensProvider({ scheme: "file" }, codeLensProvider),
@@ -43,6 +46,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
 vscode.commands.registerCommand("leetcode.signout", () => leetCodeManager.signOut()),
 vscode.commands.registerCommand("leetcode.selectSessions", () => session.selectSession()),
 vscode.commands.registerCommand("leetcode.createSession", () => session.createSession()),
+vscode.commands.registerCommand("leetcode.previewProblem", (node: LeetCodeNode) => leetCodePreviewProvider.preview(node)),
 vscode.commands.registerCommand("leetcode.showProblem", (node: LeetCodeNode) => show.showProblem(node)),
 vscode.commands.registerCommand("leetcode.searchProblem", () => show.searchProblem()),
 vscode.commands.registerCommand("leetcode.refreshExplorer", () => leetCodeTreeDataProvider.refresh()),

@@ -75,18 +75,22 @@ class LeetCodeExecutor {
 );
 }
 
-public async showProblem(node: IProblem, language: string, outDir: string): Promise<string> {
-const fileName: string = genFileName(node, language);
+public async showProblem(problemNode: IProblem, language: string, outDir: string): Promise<string> {
+const fileName: string = genFileName(problemNode, language);
 const filePath: string = path.join(outDir, fileName);
 
 if (!await fse.pathExists(filePath)) {
-const codeTemplate: string = await this.executeCommandWithProgressEx("Fetching problem data...", "node", [await this.getLeetCodeBinaryPath(), "show", node.id, "-cx", "-l", language]);
+const codeTemplate: string = await this.executeCommandWithProgressEx("Fetching problem data...", "node", [await this.getLeetCodeBinaryPath(), "show", problemNode.id, "-cx", "-l", language]);
 await fse.writeFile(filePath, codeTemplate);
 }
 
 return filePath;
 }
 
+public async getDescription(problemNode: IProblem): Promise<string> {
+return await this.executeCommandWithProgressEx("Fetching problem description...", "node", [await this.getLeetCodeBinaryPath(), "show", problemNode.id, "-x"]);
+}
+
 public async listSessions(): Promise<string> {
 return await this.executeCommandEx("node", [await this.getLeetCodeBinaryPath(), "session"]);
 }

@@ -0,0 +1,107 @@
+import { commands, Disposable, ExtensionContext, ViewColumn, WebviewPanel, window } from "vscode";
+import { leetCodeExecutor } from "./leetCodeExecutor";
+import { IProblem } from "./shared";
+class LeetCodePreviewProvider implements Disposable {
+
+private context: ExtensionContext;
+private panel: WebviewPanel | undefined;
+
+public initialize(context: ExtensionContext): void {
+this.context = context;
+}
+
+public async preview(node: IProblem): Promise<void> {
+if (!this.panel) {
+const panelType: string = "previewProblem";
+const panelTitle: string = node.name;
+this.panel = window.createWebviewPanel(panelType, panelTitle, ViewColumn.Active, {
+enableScripts: true,
+enableCommandUris: true,
+enableFindWidget: true,
+retainContextWhenHidden: true,
+});
+}
+
+this.panel.onDidDispose(() => {
+this.panel = undefined;
+}, null, this.context.subscriptions);
+
+this.panel.webview.onDidReceiveMessage(async (message: IWebViewMessage) => {
+switch (message.command) {
+case "ShowProblem":
+await commands.executeCommand("leetcode.showProblem", node);
+this.dispose();
+return;
+}
+});
+this.panel.webview.html = await this.provideHtmlContent(node);
+}
+
+public dispose(): void {
+if (this.panel) {
+this.panel.dispose();
+}
+}
+
+public async provideHtmlContent(node: IProblem): Promise<string> {
+return await this.renderHTML(node);
+}
+
+private async renderHTML(node: IProblem): Promise<string> {
+const description: string = await leetCodeExecutor.getDescription(node);
+const descriptionHTML: string = description.replace(/\n/g, "<br>");
+const htmlTemplate: string = `
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Preview Problem</title>
+</head>
+<style>
+#solve {
+position: fixed;
+bottom: 1rem;
+right: 1rem;
+border: 0;
+margin: 1rem 0;
+padding: 0.2rem 1rem;
+color: white;
+background-color: var(--vscode-button-background);
+}
+#solve:hover {
+background-color: var(--vscode-button-hoverBackground);
+}
+#solve:active {
+border: 0;
+}
+</style>
+<body>
+<div >
+${ descriptionHTML}
+</div>
+<button id="solve">Code Now</button>
+<script>
+(function() {
+const vscode = acquireVsCodeApi();
+let button = document.getElementById('solve');
+button.onclick = solveHandler;
+function solveHandler() {
+vscode.postMessage({
+command: 'ShowProblem',
+});
+}
+}());
+</script>
+</body>
+</html>
+`;
+return htmlTemplate;
+}
+
+}
+export interface IWebViewMessage {
+command: string;
+}
+
+export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();