I just added MathJax support to my Jekyll Bootsrap site by adding type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
to header.html. It works, but everything rendered as MathJax except numbers takes the color of numbers in my code highlighting.
I have tried adding .highlight in front of each line in my _syntax.scss per this suggestion to no avail; even deleting all of the color lines in _syntax.scss doesn't change the MathJax coloring; neither does setting highlighter: null in _config.yml. Any ideas?
The problem was absolute URLs. Adding the .highlight prefix did do the trick, my local build just didn't pick it up because the styling was done by the CSS file on my deployed site. Thanks for pointing me to it, Davide.
Related
I'm trying to make a GitHub page. At the beginning, I use GitHub generator. I included Gemfile and _config.yml to generate SEO tag and it works as expected. The generated site will include the following section.
<!-- Begin Jekyll SEO tag v2.6.1 -->
<meta ...
<!-- End Jekyll SEO tag -->
Now, I've just updated my site to the new one using HTML template from HTML5 UP. It's up and run normally, however, I cannot find a way to make Jekyll generate SEO tag for my index.html file. I've tried to add triple dashes (front matter) to my index.html on the first line.
---
---
<!DOCTYPE HTML>
<!-- Other code below -->
The thing is, it partially break the site (page isn't rendered properly). Therefore, I've to copy/paste the generated tag and add them manually to my code. Is there a way to make Jekyll properly create SEO tags for my site? Or did my misunderstand something very basic here?
To be clear, I've very limited knowledge in web development, that's why I use a template in the first place. Here is my page in case it helps clarify the question https://hunghvu.github.io/ and here is its GitHub repository incase you want to know the file structure.
Update
(09/30)
I attempted to turn the index.html file into index.md while still keeping all the code (plus the tripled dashes). In a sense, it works. The page is generated, but still, it's not rendered properly as when I use html format. I'm aware that the way to actually build site using Jekyll is much different, but that does not answer my question.
In case it is necessary to show what I mean by saying "not properly rendered", I will update this question later on.
(09/31)
The picture below is how my page looks like when I add front matter and {% seo %}. Notice that when I first go to the page, the side bar is already in SOME OTHER WORK, or last section. It should be on the WELCOME. The WELCOME section is not rendered and sidebar functionality is broken.
Problem
GitHub pages gem is not included in your project, therefore GitHub is not running Jekyll build. Furthermore, you have nothing specified in your front matter. You also have no layout.
Solution
Include gem "github-pages", "~> VERSION", group: :jekyll_plugins in your Gemfile.
Notes
Consider using front matter and creating a layout file _layouts/default.html and moving everything except what’s in body (including SEO)to the layout file. The index.html should extend the layout by specifying layout property in front matter.
References
Front Matter: https://jekyllrb.com/docs/front-matter/
GitHub (step 9): https://docs.github.com/en/free-pro-team#latest/github/working-with-github-pages/creating-a-github-pages-site-with-jekyll
I am building a site from a jekyll theme. I was able to completely customize the whole site except the yellow icons in the picture. These weren't found in the site files. Nowhere. Inspecting that element just shows a div class. I need to remove these but I can't because I can't find them anywhere.
These icons are actually font. To remove them you will have to remove specific classes from the element. In this case for example if you want to remove Laptop icon, you would remove fa-laptop class from the i element.
You can read more about it on the following link Font awesome - Get started
Can you search for a file called font-awesome.min.css in your project root directory? These icons should be a reference from that file. You can modify the mappings to point to something else.
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.
On my page, Fontawesome icons (for example the two one of the extreme top right of the page) don't work any more, despite the fact that the vendor CSS is indeed loaded. Here's how it is loaded from my CSS file:
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
Any idea why it's not working?
In http://pizzaontime.fr/new/wp-content/themes/pot/dist/styles/main.css you are including font files for FontAwesome locally. The link relative link starts with ../fonts/, so it should be in here: http://pizzaontime.fr/new/wp-content/themes/pot/dist/fonts/, but there is no FontAwesome font file.
Yes, you are including the *.css file, but you will have to place the font files in the same structure the FontAwesome CDN is organising them.
Edit with more details on how to fix it:
First approach (fastest and easiest way): Include the css file in your HTML (<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">). Remove your include in your CSS file then.
Second approach: Place the missing font files in http://pizzaontime.fr/new/wp-content/themes/pot/dist/fonts/. You can find them here.
all. I'm using conditional commenting in IE to fix some CSS problem that i'm having with IE7.
I have a all.css file that work on firefox and ie7 with some execptions that will only fix the IE7 css problem. I put my fix on all_iefixes.css both files is in App_Themes/Default/ folder.
I use have a master page (Default.master) that all my pages inherited. On some page that is inside another folder, for example, localhost/myapp/blah1/blah.aspx will not get the all_iefixes.css in the App_Themes/Default folder If i change the
<!--[if IE]><style type="text/css">#import "all_iefixes.css";</style><![endif]-->
to
<!--[if IE]><style type="text/css">#import "./../App_Themes/Default/all_iefixes.css";</style><![endif]-->
then it will work for the page inside the blah1 folder but it will break other page that doesn't live inside blah1 folder.
I think i can create several master page and depend on where i want to put my aspx pages to live then i can adjust the link but i think this is a rather "stupid" fix (?). Is there an elegant way to do this.
Jack
You should avoid using relative paths in your master pages unless you can generate it with code:
You can try using server tags to resolve the path, but this is not always possible (for instance, if youre manipulating the control tree in code)
#import "<% this.ResolveUrl("~/App_Themes/Default/all_iefixes.css") %>";
+1 from the ablove. However, I'd rather use browser files in ASP.NET.