How to open the web page preview inside Visual Studio Code?

Question

Given that the Visual Studio Code is based on Chrome web kit

Could we open the preview inside the editor as a panel ?

According to this page, this feature is highly requested !

Answer 1

Well for now, based on Dan Shryock's answer here and this post, here is what I did:

1. Install nodejs then live-server npm install -g live-server
2. Run live-server at the project folder

3. Create a live-view.md file with this in it (Place it wherever you want. I put it at the base folder of all my projects since I can use it for whatever I'm currently working on):

   <div style="border:1px solid #777;position:absolute;left:10px;top:10px;bottom:10px;right:10px;"> <iframe src="http://localhost:8080/"; width="100%" height="100%" frameborder="0" /> </div>

4. Open live-view.md in the second/split pane in VS Code and click the "Open preview" button (top right of file).

Now whenever I save I see the changes show in the live-preview.

Answer 2

For the moment, here how i solve it : Editing the file

C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\parts\
markdown\browser\resources\welcome-mac.md

with super-admin rights, and adding

<input type="text" value="http://127.0.0.1:8080/" id="preview" onkeydown="var k = event.which; if (k==8) this.value = this.value.slice(0, -1);else if (k==13) document.getElementById('prevButton').click(); else this.value+=String.fromCharCode((96 <= k && k <= 105)? k-48 : k); "/>
<input type="button" onclick="window.location.replace(document.getElementById('preview').value);" value="Preview" id="prevButton" />

Then just open Welcom Page in the Menu you will have this

Finally add a white background to your html body