English / Japanese
We Value Your Feedback! Your input helps us improve!
HTML Speed Viewer
A VSCode extension that lets you preview HTML and Markdown files instantly.
It can also display HTML previews for PHP files containing HTML-encoded templates.
With a serverless and real-time approach, code changes are reflected quickly, boosting your development efficiency.
Features
Lightweight & Simple
No web server required. Everything runs within VSCode, making setup quick and easy.
Supports Various Formats
Supports multiple file types such as HTML, PHP (extracting the HTML part for display), and Markdown.
Compatible with extensions like .html, .htm, .php, .xhtml, .shtml, .xht, .ehtml, .md, and more.
Real-Time Preview
Whenever you edit the file in the editor, the preview updates immediately.
Bidirectional Element Sync:
- Select an HTML element in the code → That element is highlighted in the preview
- Click an element in the preview → The corresponding part in the code editor is selected
Disable Links & Grid Display
Easily toggle link-click disablement or grid display using the sidebar menu or command palette.
Usage
Open a File
Open any HTML/PHP/Markdown file in the VSCode editor.
Show the Preview
Method 1: In the sidebar (activity bar), click HTML Speed Viewer, then select Open HTML Speed Viewer.
Method 2: Open the command palette (Ctrl+Shift+P / Cmd+Shift+P), type HTML Speed Viewer, and choose the HTML Speed Viewer command.
Real-Time Preview
- Every time you edit the file, the preview automatically updates.
- Toggle link-click functionality and grid display via the sidebar: “Enable Link,” “Disable Link,” “Toggle Grid.”
Bidirectional Selection
- When you select tags or text in the editor, the corresponding part is highlighted in the preview.
- Clicking an element in the preview scrolls and selects the matching range in the editor.
Main Commands
(Access via the command palette: Ctrl+Shift+P / Cmd+Shift+P)
- HTML Speed Viewer: Opens the preview
- Toggle Grid Display: Toggles the grid lines (element outlines) on/off
- Disable Links: Disables link clicking in the preview
- Enable Links: Enables link clicking in the preview
Release Notes
β Version 0.6.18 - 0.6.0
- Introduced a settings screen that enables users to adjust the grid color.
- Added a lightweight Markdown preview.
- File name display
- Restore the previous viewing state in the HTML Speed Viewer.
- Supports a comprehensive range of HTML file extensions, including .html, .htm, .php, .xhtml, .shtml, .xht, and .ehtml.
- Implemented local resource preview.
- Added link disabling functionality.
- Improved Editor Display Processing.
- Code refactoring.
β Version 0.5.19 - 0.5.0
- Activity Bar Icon and GUI Preview Display:
Adds an icon to the activity bar, allowing users to easily access the extension. The GUI-based preview display feature enables quick and intuitive visualization of HTML content directly within the interface.
- Added preview handling for tab changes.
- Enabled display of external resources in preview.
- Added telemetry information.
α Version 0.4.1
- Code refactoring.
- Improved viewer startup behavior (allows the viewer to start even when no page is selected).
- Added telemetry information.
α Version 0.3.23 - 0.3.7
- Initial release.
- Implemented real-time preview and synchronization highlighting between the code editor and preview.
Future Plans
- Beta 0.6.x Releases: updates and feature additions based on user feedback.
- Product Release
License
This extension is provided under the following terms:
- Scope of Use: Available as a Visual Studio Code extension.
- Redistribution: Please install from the Visual Studio Marketplace. Redistribution is not permitted.
- Modification: Modifying the source code is not allowed.
- Commercial Use: Commercial use is permitted.
We Value Your Feedback!
Thank you for trying out our extension. Your input helps us improve!
- Questions or suggestions? Drop us a note in our Feedback Form.
We appreciate your support and look forward to making this tool better for you.
HTML Speed Viewer - Feedback
Thank you for using HTML Speed Viewer!
日本語
HTML Speed Viewer
HTML、MarkdownファイルをすぐにプレビューできるVSCode拡張機能です。
HTMLテンプレートなど内部にHTMLエンコードされたphpファイルもHTMLプレビューします。
サーバーレス＆リアルタイムに、コードの変更を素早く反映し、開発効率を高めます。
特徴
軽量＆シンプル
Webサーバー不要。VSCode内で完結するため、セットアップも簡単です
多彩な形式に対応
HTML、PHP（中のHTML部分を抽出して表示）、Markdownなど、さまざまな拡張子をサポート
.html, .htm, .php, .xhtml, .shtml, .xht, .ehtml, .md, などに対応
リアルタイムプレビュー
エディタでファイルを編集すると、プレビューが即座に更新されます
要素の双方向同期：
- コード側でHTML要素を選択 → プレビューでハイライト
- プレビューで要素をクリック → コードエディタが該当箇所を選択|
リンク無効化・グリッド表示
サイドメニューやコマンドパレットから簡単に「リンクを無効化」や「グリッド表示」を切り替え
使い方
ファイルを開く
任意のHTML/PHP/MarkdownファイルをVSCodeエディタで開きます
プレビューを表示
方法①**: サイドバー(アクティビティバー)にある「HTML Speed Viewer」をクリックし、「Open HTML Speed Viewer」を実行
方法②: コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）で「HTML Speed Viewer」と入力し、HTML Speed Viewer コマンドを選択
リアルタイムプレビュー
双方向選択
- エディタでタグやテキストを選択すると、プレビューで対応箇所がハイライト
- プレビュー上で要素をクリックすると、エディタ側が該当範囲を選択しスクロール
主なコマンド
コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）
- HTML Speed Viewer: プレビューを開く
- Toggle Grid Display: グリッド線(要素枠)の表示/非表示を切り替え
- ** Disable Links**: プレビュー内でのリンククリックを/無効にする
- Enable Links : プレビュー内でのリンククリックを有効にする
リリースノート
β版 0.6.18 - 0.6.0
- 設定画面の追加：グリッドカラーの設定変更機能追加
- Markdownプレビューの追加(簡易版)
- ファイル名をタイトルバーに表示
- HTML Speed Viewer 復元機能追加
- メニューの表示・非表示 機能追加
- 対応ファイル拡張子追加:.html, .htm, .php, .xhtml, shtml, .xht, .ehtml
- ローカルリソースの表示の追加
- リンク無効化機能の追加
- コードリファクタリング
- エディタ表示処理の改善
β版 0.5.19 - 0.5.0
- アクティビティバーのアイコン設置とGUIでプレビュー表示機能追加
- タブ切り換え時のプレビュー処理を追加
- プレビュー表示の修正（外部リソースの表示を許可）
- テレメトリー情報追加
α版 0.4.1
- コードリファクタリング
- Viewerの起動仕様を改善（空ベージ選択時でもViewerが起動できるように変更）
- テレメトリー情報追加
α版 0.3.23 - 0.3.7
- 最初のリリース
- リアルタイムプレビューとコードエディタとの同期ハイライト機能を実装
- 利用期限が2024年12月31日までのα版です
今後の予定
- β版 0.6.x リリース（ユーザーフィードバックに基づき、機能追加、アップデートバージョンを予定）
- プロダクトリリース
ライセンス
本拡張機能は、以下の利用目的で提供されています。
- 利用範囲: Visual Studio Codeの拡張機能としてご利用いただけます。
- 再配布: Visual Studio Marketplaceからのインストールをお願いいたします。再配布は許可されておりません。
- 改変: ソースコードの改変は許可されておりません。
- 商用利用: 商用目的でのご利用可能です。
フィードバックのお願い
いつもHTML Speed Viewerをご利用いただき、誠にありがとうございます。
より良い拡張機能とするため、皆様からのフィードバックを心よりお待ちしております。
ご意見・ご感想、バグや改善点などございましたら、お気軽にお知らせください。
HTML Speed Viewer フィードバック ページ
ご利用いただきありがとうございます！
| |
