Atom editor custom made file template - html

I currently use ATOM as my text editor for HTML files and etc. My headers, nav bar, and footer are usually all the same. Is there a way or package that I can install that will allow me to have this autocomplete as a shortcut for any HTML file that I am working on?
Example:
I open an atom file
Save as HTML
Type in a button or do something
Page will have all my custom made HTML code
That way I don't have to re-entering it or etc.

To do this in Atom, you're probably looking for the snippets feature. This lets you auto-insert arbitrary content as you need, and you can specify your own snippets - like your standard header, footer etc. You can even create shortcuts so your snippets are automatically expanded.
Once you've found the snippets feature, do let us know if you have any problems getting it to do exactly what you need. Most text editors will have something similar - it's a common use case.

Related

VSCode HTML "pieces"

I use "pieces" to avoid confusion with the built-in "snippets" functionality.
The scenario is that I am rendering pages server-side in Nodejs, and as part of that I want to code portions of html in files that can be used to assemble an entire page. These are project-specific so the snippets functionality is really not useful here. Problem is if I write an html file that for example only has a section, VSCode tells me there is an error since that file does not start with <DOCTYPE>, etc.
The goal here is reusable pieces instead of duplicating for each page. E.g. define a header.html file that only defines the <header> section, and can then be inserted into each rendered page.
Has anyone done similar? How to tell VSCode to treat as HTML but without demanding a complete document and indicating an error?

Is there a way to apply custom CSS before printing a page in a browser?

I occasionally save tutorials from a website as a PDF file for future reference.
My current manual workflow is:
Click the "show on one page" link to get a full single page view of the article.
Open the DevTools of the browser and select sections with advertisements and related links with help of the inspect-functionality and remove them.
Print the page as a PDF file.
I used the Firefox or Chrome-Browser for this, as they both have the required functionality and behave very similarly in that regard.
I noticed that the content I want to remove to get a "clean print" of the content is mostly the same: Let's say all adds are embedded with a div with the class add-banner.
Is there a way to automate these steps?
One idea is to load a custom CSS file that I would need to prepare specifically for a site. Simple rules like .add-banner { display: none; } would allow me to hide the sections that I don't want to print.
I also took a look at console based scrapers because I like the idea to call a command with the URL as a parameter. But the tools I've discovered are image based and I want a indexable PDF file where I can search for text and select parts.
What is the best option to achieve this?
The extension User CSS from the chrome web store (free) allows me to add custom css rules to whatever page is loaded. It is possible to import and export CSS rules and the extension allows to store the custom CSS on a per site base.
This is exactly what I was looking for, since it makes it easier and quicker for me to remove unwanted sections before printing.

HTML text style shortcuts functioning within Github repository file edits?

I am just starting to learn Javascript, and I have a small question about editing files within a Github repository.
I am writing functions within a file in my repository that involve mathematical equations, and I am finding that within the editor itself, it is changing the style of the text based on common HTML shortcuts. In my case, whenever I use the asterisk key, *, to multiply values, the editor file will show all text between two consecutive asterisks in italics. It doesn't change the nature of the code itself at all, so it's just a QOL issue for me personally. It's just strange to see blocks of my code appearing italicized within the editor.
Is there any way to have HTML not try and parse such characters as text style shortcuts within the Github repository file editor?
Use .js file extension for Javascript code.
In README.md file put basic description for your project. Basic guid how to write README.md

How do I copy html, css, Javascript code from email

I am trying to copy code from an email into a a Web page file. I would like the file to have functionality.
I tried copying it directly into a new Sublime file but the colors did not appear as if I had typed it in. When I right clicked background, no open in browser option appeared. I am experimenting with code snippets in blogs and having problems pasting code with functionality in tact. Is this an extension omission ?
Thanks
Sublime will copy plain text, a wysiwyg html editor will copy the markup. If you want to get the markup, do 'show original' (gmail) or whatever your client has as an equivalent. The original will have the markup and can be copied into Sublime. Hope that helps.

How do I program different languages in Sublime Text?

I recently downloaded Sublime Text, but I could only find 9 languages, all of which I don't program. I would like to code HTML, CSS, and JavaScript, and I would like to know how to add these build systems onto my computer.
SublimeText is just a text editor with some 'extra bits' plugged in.
HTML, CSS and JavaScript aren't compiled languages, so you don't need a compiler, just save the file with the correct extention (.html, .cs or .js).
For syntax highlighting, click the box on the far right of the status bar, it'll list some languages that SublimeText knows about, including those three and will helpfully provide syntax colouring and formatting to help you along.
Sublime text is only a text editor. As for HTML, CSS, and JS, those are all present in sublime, and don't require a build system, just a web browser.
If you want to use those languages, use shift-command(control?)-p to open the command pallet and type sshtml, sscss, ssjavascript, etc. to set the syntax highlighting.
To run it, simply open the HTML file in your browser, and reload the page if you've made changes.