I am giving a presentation in which I need to have my code editor open alongside my HTML slides. Since I have the VS Code editor configured the way I need, it would be nice to have a way to display the HTML slides in the VS Code editor itself.
I strongly suspect this is possible, because VS Code is a very powerful editor with several extensions and features. I have tried installing an HTML previewer from the marketplace, but that could not load all the dynamic content of the slides. I also tried the VS Code reveal extension, but that did not work for me either.
Is there an alternative way to do this? Any help will be highly appreciated.
Live Server VS Code add-on launch a local development server with live reload feature for static & dynamic pages; the reveal presentation is automatically rendered each time the edited code is saved on the VS Code side (Control+S).
There is an unreleased version yet that does not require saving to see the changes...truly live.
It is a workflow that makes it much easier to check changes before publishing them. Combined with the possibility of editing the html front-end of the presentation generated by Live Server, with the browser's Dev Tools, a very dynamic environment is created.
Related
Question
The editor brackets can do that. Supposed that, when I click my html tag in my source code file, the browser would automatically highlight the section/div in the broswer like google chrome developer tools.
Step 1
Click my tag in my source code file
Step 2
the live server will automatically focus on the section I want
How could I make it in VSCode?
VS Code does not have a built-in live server. Whatever extension you are using for live server can implement this, however I am not aware of any ones that do currently. Consider filing a feature request against them for this
Look at Five Server extension.
I used to love this Live Preview of Brackets, mainly for two unique features unlike many other editors and extensions:
It shows the preview live, literally. It doesn’t wait for file save to show the changes.
Highlights the section in the preview, corresponding to the html tag in which the cursor is placed currently.
I have been looking for a similar VS Code extension for a while.
Finally found it, JUST NOW.
I'm trying out Chrome Devtools persistence/Workspaces. It works great for a very simple project with no build tools. I can edit the CSS in the inspector and the changes show up live, I can edit HTML and JS in the sources panel once I right click add a workspace, then add a mapping to the remote files.
It's very lightly documented and doesn't seem well used though, I'm wondering if it's possible to use this feature and have code that's been run through a preprocessor and have my updates apply to the source file. Obviously I'd have to set up source maps, but it doesn't seem from what I've found so far that you can do that along with the persistence feature.
I'm new to elipse php. i have used dream viewer for my php development before moving to the eclipse. So, i need to know when i drag and drop the css file into html editor, it needs to auto genarate the <link> tag for that css file. It worked with dream viewer. But its not working with eclipse. And, also when i need to use css classes inside html tag it needs to type the css class name.But, instead that i need to know how to config that to all the css class as suggestion for html tags, like in dream viewer and netBeans.
The text DnD (Drag and Drop) feature (initially introduced by bug 11624 in 2007) has been slowly extended to various editors, as reported by the bug 231294:
Tested in EclipsePdt-2.2.0.v20100427
Verified fixed for:
PHP files
JS files
Still reproducible in:
CSS files
HTML files
XML files (source view)
So it is still "work in progress".
The relevant blocking issues are:
bug 178104: [DND] Need to revisit dnd API to allow multiple drop targets
bug 173405: Make use of IDragAndDropService (Show Votes)
bug 195655: Drag'n'drop selected text
First of all Eclipse is not an IDE, it's a platform you can build IDEs (or any other application). There are several implementations for different languages. Most popular one which is actually the origin of Eclipse is Java IDE. There is also a plugin/feature for PHP development, called PDT.
DreamViewer is a specialized WYSIWYG editor for web development (mostly around HTML/CSS/Javascript) that includes support for different web scripting languages. It has some special properties as you mentioned, that can create a link element when you DnD.
What you can do is request a new feature from PDT team, that creates a link element to the dropped file inside a HTML document.
I managed to collect the behavior of a complex web site into a webarchive. Thereafter I would like to turn that webarchive into an html set of nested directory. Yet, when I did it both with Waf and with a commercial software bought on the the Apple store, what I get is just the nested directory with the html page at the bottom and no images, nor css nor working links.
If you are interested the webarchive document is at:
http://www.miafoto.it/it/GiroMilano.webarchive
while the weak product of the extraction is at:
http://www.miafoto.it/it/Giromilano/Pagine/default.aspx
and the empty directories above.
In addition to the different look, the webarchive displays the same behavior as the official web site - when a listbox vales is selected and then the button pushed - while the extracted version produces a page with no contents by loading itself rather than the official page.
As you may see the webarchive is over 1MB while the extraction just little over 1 KB.
What is wrong with it and how may I perform such an apparently trivial business with usable results?
Thanks,
textutil -convert html example.webarchive
Be careful — html with files is created in the same folder as webarchive!
Also, I had to open .html with text editor and replace "file:///image.tiff" links (replace "file:///" with "") so they point to relative path.
Also, not all browsers display .tiff images.
Who knew we have Stack Overflow wiki?
I find that this WebArchiveExtractor.app works on my Mac (Mojave OS) –
https://robrohan.github.io/WebArchiveExtractor/
I managed the issue by finding all parameters being submitted in the page and submitting them too in my script, ignoring the webarchive.
To save HTML pages on mac, I use chrome. Download and install it and save your page as HTML. Safari will save the web pages with webarchiveformat and for me, it's very hard to deal with it.
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.