Saving a file in neovim messes up the indentation? - html

tldr; saving a HTML file in neovim messed up my indentations. Neovim on the left, vim on the right of screenshot.
I just installed neovim with NVchad set up. I've been using it happily for this HTML coding assignment. Link to NVchad here:
https://github.com/NvChad/NvChad
I noticed the indentations were off when I uploaded the file to github. You can see that the and tag is messed up. There are a few more examples sprinkled throughout the code.
Is this normal? I am going to edit the file on vim so that the indents are right, but if this is a daily occurence on neovim I will need to go back to just using vim.
Alternatively, is there a plug and play set up for neovim that is focused on python coding? I am only doing HTML as a short course.
What I tried:
I tried to make an HTML file with indents.
What I was expecting:
I expected the indents to stay the same as shown in the neovim file.
What I got:
The indents got messed up.

Related

Not able to write in html file in VS Code

When ever I make a HTML file in VS Code the screen is black and I am not able to write in it. Whereas whenever I make a file of another extension like .java or .css it works and I can type in it. Tell me what to do.
When I make a file, it says this:
After adding .html it shows blank screen:
But I am able to write in other extension:
I removed the vim extension, but that doesn't work, and I don't know what to do.
A few items --
Try uninstalling it and doing a clean install.
Submit it to Microsoft Report a problem with the Visual Studio product or installer

Use image in Sphinx as clickable link

Problem:
I have a table of images that I'm using as an overview/introduction. I want the end-user to be able to click on the image and it link to the HTML page for that image's corresponding introductory information1.
The problem is I can't seem to get the linking part to work. The table of images shows up fine, but clicking on an image just takes me to a page not found screen (see image at bottom of post). I've spent about an hour on Google but haven't found a solution yet.
1each image has a corresponding .rst file with the info I want the end-user to see
Info:
Sphinx 1.8.5
Python 3.7.6 (MiniConda)
Building html pages from reStructuredText files
sphinx-build -b html source build
make clean html
make html
Nothing special has been done in my conf.py file, other than including the RTD theme
I'm guessing I will need to do something fancy in my conf.py file if doing what I want is possible at all
Adding the .rst files to the .. toc:: directive in introduction_file.rst didn't help
Here is the reST code I have so far:
the image directives are all inside a table; table omitted for brevity
I'm also confident that the 'image directives inside a table' thing is not the issue
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: introduction_files/my_first_image_intro_file.rst
.. also didn't work:
.. :target: introduction_files/my_first_image_intro_file.html
File Structure:
Home.rst is the entry point for the HTML pages (i.e. it used to be called index.rst until I renamed it and refactored conf.py accordingly)
--build
...
-- source
|--Introduction/
|--introduction_file.rst
|--images/
|--my_first_image.png
|--my_second_image.png
...
|--introduction_files/
|--my_first_image_intro_file.rst
|--my_second_image_intro_file.rst
...
|--_static/
...
|--_templates/
...
|--conf.py
|--Home.rst
I'm not opposed to doing what I want in HTML/CSS, but if there is a way to do it in sphinx then I'd prefer to do it that way. I will end up editing the HTML code regardless, but the less editing the better; Sphinx is essentially a quick-start or template.
This image is what I see in my browser when I click on one of the images in my table-of-images. The URL bar in Chrome shows the correct path to the .rst file though, so I'm a bit confused.
I tried changing the :target: file extension to .html but that didn't work either
Edit: forgot to add the location of introduction_file.rst to the folder structure
Solution:
Mix up between the paths. I was linking to the file in the source directory, but needed to link to the file in the build directory. Had to navigate back to the root directory with a few '../' prefixes, then navigate to the .html information file in the build directory. In other words, this is what it ended up looking like:
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: ../../../build/html/Introduction/introduction_files/my_first_image_intro_file.html
The target option's value must be either relative to introduction_file.rst (you don't provide its location so you'll have to figure that out), or absolute to the documentation root, i.e., /Introduction/introduction_files/my_first_image_intro_file.html.

How to configure Jekyll Syntax Highlight?

By configure I mean font size, font family, syntax highlight style, line numbers and so on. I have followed some tutorials but they don't worked for me.
What I did:
added markdown: kramdown and highlighter: rouge to _config.yml;
added a css theme from pygments directly in head / imported it in the main.scss file.
I tried this and the syntax highlight worked but in a limited way, cause I can't add the line numbers with lineos. I noticed that the {% highlight lang_name %} tag doesn't works, just the triple tildes.
Any help will be welcome
Pygments has been deprecated. For highlight tag, you may consider use rouge or maybe markdown code blocks with highlight.js.
I think the answer depends to some extent on the theme that you are using. If you want to change only a few small things, the best way is to use the Inspect Element feature that comes with your browser.
Start up your website using bundle exec Jekyll serve and navigate to a page with syntax highlighted code.
Right click on a code block and select "Inspect Element". Something should open up on the side or below. It will look like this:
Now play around with the color/font size as you see fit.
Then just copy the contents into the main.css file.
A tricky part may be finding the main.css or main.scss file for your theme. Try to grep for it the theme's directory (which you see using bundle show theme-name). For Minimal Mistakes, it is \assets\css\main.scss since this theme uses scss.

My website project's images get uploaded with capitalized filename. Why is this happening?

so strange problem.
I finished my website and pushed the project to github.com.
The picture section of my page won't work because the pictures are added into the html with .jpg but github has it as .JPG (capitalized).
So if you go to my site: https://dhuber666.github.io/Frodo/fotos.html you won't see the pictures. However if you click on one of the missing file icon you will get the link to the full picture (but it say that the page does not exist because filename is written in lowercase letter (as it should be) but github has the images capitalized (.JPG)
If you edit the link like so: /Frodo/images/pic4.JPG (sry have to shorten that I can't post more then one link)
it infect works.
So what is this problem? On my local machine it's fine.
I uploaded it on windows with the github shell like normal.
So I go to my local images folder and I see the filename like so: pic4.JPG --> If I right click it properties it says pic4.jpg
So I renamed it to pic4.jpg and after hitting enter I got .JPG again.
I deleted the whole file ending enter. Rename it again and write .jpg and enter --> Now it's actually pic4.jpg.
But how can I push it to github, because it does not recognize it as changed file?
Also how can I solve this for feature pictures and uploads?
Bonus: Cute dog pics on my page :P
Thank you!
I do not know why this is happening, but I know how you can fix it.
Solution 1: Go into the html and make the file extension capitalized.
Solution 2: Change it via the command line.
Github only allows for image change through commmand line. Follow the link above to their guide on changing via command line.

What is the .hinc Extension on a file?

I'm working with some pre-existing web files for a website, and I see there are files with .hinc ending. The code inside them is HTML, but Sublime Text 2 doesn't seem to recognize it, and doesn't color anything. Also, the code still runs on the website.
.hinc is an included HTML source file in c++. See this link http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2012/n3325.html#style.hinc