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.
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'm using Jekyll on Github, and I wonder whether there's a way to link to a section within a page. Say I have a section like
## Section 1 ##
section content
and later in the same page I want to link to this section. I've found how to link to another page within the blog and do footnotes, but not this.
As a note, I use markdown: kramdown in my _config.yml
kramdown supports the automatic generation of header IDs if the option
auto_ids is set to true (which is the default). This is done by
converting the untransformed, i.e. plain, header text
So in the above example ## Section 1 ##, it would generate the following id: id="section-1", then the anchor is linked to via the A element:
Section One
Or in plain kramdown/markdown: [Section 1](#section-1)
It seems that this has been changed to #heading-section-1 (checking on Jekyll 3.7.3 right now).
As a way to figure this out on your own, you can inspect the element and see the id being used on the rendered page.
I found a nice repository that helps add anchors to all headers in three simple steps.
From docs:
Download the anchor_headings.html file from the master branch
Toss that file in your _includes folder
Where you typically would put {{ content }} in your layout,
you would instead use this Liquid tag to output your page's content:
{% include anchor_headings.html html=content anchorBody="#" %}
As result you will see:
Which is easy to customize.
If the section of the page you want to jump to is not a section heading, then this accepted answer didn't work for me. The following worked for me:
[jump](#final-solution)
<div id="final-solution"></div>
So I got Jekyll 3.3.1 and everything is different like the location of folders and other stuff. I googled how to change colour of the code in jekyll posts but cannot find any step by step results. I am trying to achieve sublime text theme!
I suppose you are using Rouge for highlighting? If so, have a look at this discussion on github.com.
You have to modify the Css file for the language(s) you want to support and then add the file to your page
I have been working on a personal "how-to" guide, chronicling and keeping a journal of my studies as I go along.
I now have a, almost too long block of code that, when I've encountered this length of code myself, its always frustrating trying to highlight JUST the block without it highlighting the whole page, or not enough.
So, my question is, for rst (reStructuredText) .. code-block::'s, is there an add-on or a way to add in a copy button, for automatic highlighting or automatically adding the text to the users clipboard? Or would this be a more html-literal type of code I'd have to include in the build and reference it in the code block? If so, what would something like that look like as well?
There is a dedicated package for that called sphinx-copybutton.
It's straightforward to use.
# Install
pip install sphinx-copybutton
# Declare it in the conf.py
extensions = [
...
'sphinx_copybutton'
...
]
And that's it, generate the doc and a copy button will appear automatically in each code block.
In Sphinx projects, the presentation of the HTML page is controlled using a template language (Jinja2 by default). So you can make your pages more interactive by adding Javascript to the HTML template file(s) and it will get inserted when Sphinx uses that particular template file to render a page.
Locate your templates directory by searching for templates_path in your conf.py
Jinja templates can extend one another, so you probably want the file that begins with {% extends "basic/layout.html" %}.
Once you track down where in the sequence of extension you want to make your change, you need to combine:
The section of the page where you want this to take effect (typically the main block)
the CSS with a class for code blocks (eg. in mine it's class=highlight). The .CSS file might well be in docs/source/_static/
A javascript snippet to create the button and write to the clipboard (eg. https://clipboardjs.com/)
Next, build the Sphinx project locally (make html) until you have it dialed in and then push your source repo to readthedocs.
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.