reddit / emacs
Any Help? I want to run html/css/JavaScript file within Emacs.
sreekumar_r · 2022-10-22 08:00
In my next class, I would like to use a built-in server which updates when I type an HTML/CSS code. A quick browse through Internet through a lot of option including [HTML Editing with Emacs](https://irt.org/articles/js136/). But I think it is meant for some other purpose. I am looking live-server in VS Code. Any help will be appreciated. It should be simple to configure and use.
-cvdub- · 2022-10-22 08:21
https://github.com/netguy204/imp.el
-cvdub- · 2022-10-22 08:22
Also check out skewer for a JS repl in Emacs
[deleted] · 2022-10-22 08:49
[removed]
sreekumar_r · 2022-10-22 10:37
Thanks, I have already tried it. It looks more like simple-httped with bit long learning curve. Moreover, whether I work in Lisp, Scheme or Racket, I get right window to their REPL. This is exactly I wanted when I tried to use `imp.el`. But when I use it, it is showing in a tab of an already opened browser window. So I need to do `ALT-TAB` when I use it. That doesn't create a live coding experience.
[deleted] · 2022-10-22 18:25
[deleted]
[deleted] · 2022-10-23 01:28
[deleted]
wasamasa · 2022-10-23 07:02
VS Code is at an advantage there because it's literally a browser, it can view a HTML page with no extra fuss. Emacs does not really have that luxury and needs to resort to hacks like xwidget-webkit to do the same.
Have you considered to just open Emacs and the browser window side-by-side?
sreekumar_r · 2022-10-23 14:50
Your first answer: VS Code has an advantage (even Teams) both I believe run on typescript. I tried VS Code for a day and I had to uninstall it. Too crapy code with lots of unnecessary suggestions to divert your attention from the actual coding.
Your second answer: I feel this is the only option at present I can use. But, I have come across Nyst, (installed by yet to try) and eww (think it's text based). Anyway, could please tell me how to run Emacs and my browser side by side. I tried this for quite a long time. And it has to do with Window Manager (tiling) but till now I don't it.
[deleted] · 2022-10-23 15:01
[deleted]
imandysup · 2022-10-23 15:03
Have you tried using xwidget-webkit to open the html page? That way can run a browser inside an emacs window, and organize it so it’s side-by-side with your code. That’s what I do when working on my simple web app.
If you’re on Linux xwidget-webkit runs without issues. If you’re on Mac, there are some minor bugs and potential memory leaks. But the bugs are only there for Emacs version 29, and the memory leaks are being worked on
sreekumar_r · 2022-10-24 00:53
Thanks a lot. I didn't know about that. I will try. Furthermore, I am in a Linux box and think it won't be an issue. Surprisingly, I got this link on YouTube [https://www.youtube.com/watch?v=He83coKoq7o](https://www.youtube.com/watch?v=He83coKoq7o)
which didn't show up earlier.
[deleted] · 2022-10-24 01:31
[deleted]
imandysup · 2022-10-24 01:35
Great, glad I could help.The video seems a bit out of date, but still a good intro to the feature.A couple of notes:
* you don't have to "pretend to submit a bug" to see if your Emacs was built with xwidget support, you can just evaluate this function (`emacs-build-description`)
* if you don't see `--with-xwidgets` in the result text, you'll have to install Emacs again with the proper configuration
* you can navigate to any page using `xwidget-webkit-browse-url`. I even set up a shortcut `my-browse` that immediately loads my localhost server:
​
(defun my-browse ()
(interactive)
(xwidget-webkit-browse-url
"http://localhost:8000/"))
​
* I'm pretty sure recent versions made it much easier to insert text into a page (at least 29.0.50 did, but I think the improvements were older), so you can ignore all the weird steps shown in the video with the scratch buffer etc. But at any rate, the core functionality of navigating to pages and displaying the content should work perfectly
sreekumar_r · 2022-10-24 04:35
In fact, I found another one, [xwwp](https://github.com/canatella/xwwp).
It is an enhancement for xwidget-webkit browser.
wasamasa · 2022-10-24 06:20
1. Open Emacs
2. Open external browser
3. Arrange Emacs window to occupy 50% of your screen
4. Arrange browser window to occupy 50% of your screen
5. Move Emacs window and browser window side by side
The specifics depend on your window manager of course. If I use something like xfce, it's a matter of ensuring neither window is maximized, then draggings its borders with the mouse and dragging on its top bar to move it around. If I use something like i3, I need to send both windows to the same container, change the container layout to a vertical/horizontal split and maybe adjust the split ratio. See [their user guide](https://i3wm.org/docs/userguide.html) for specifics.
In any case, this is out of scope for Emacs, which is the beauty of that solution.
sreekumar_r · 2022-10-24 06:33
Thanks for your suggestion. I run a trivial Linux box (without containers) and dragging exactly 50% looks not that good. Anyway, I got some information like xfce, and i3.