How do I change colour of the code in jekyll 3.3 - jekyll

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

Related

Theme-Chooser in Github - to choose a jekyll-theme vanished

I am currently setting up a page and I wonder where the GitHub theme-chooser has gone. According to the following instruction, I want to go through the process:
It seems that the theme-chooser has been removed. I want to use the jekyll-theme minimal (like caroly stransky does).
Is this documentation still correct and is the information still relevant?
update: see here the image of how it looks here
i want to add the line that carol did in the configuration; Christian it would be awesome if you can help here...
second update: hi there - since i cannot see the config.yml i think that i have to add the additional line to the so called raw file: see below the image
can you confirm that is that all right!?
love to hear from you
update3: well i guess that i ll need to create a new file named "_config.yml" and with this i ll ned to set it's contents to this: ´theme: jekyll-theme-minimal`´ I guess that i have to do this
update4: well i ve created the file - and i guess this is done right - but wait. I have to edit this file correctly
theme: jekyll-theme-minimal
Well i need to add this correctly - not as comment but as content of the file... This is pretty important.
The blog post (workwithcarolyn.com/blog/digital-cv-guide) is from 2020. The displayed images are outdated. In a test repo I couldn't find the option to select a theme anymore. The new pages setup page (https://github.com/YOURUSER/REPOSITORY/settings/pages) just contains a link to the docs:
The link to the docs explains how to set a theme for your site. Under point 5 the page says:
Add a new line to the file for the theme name.
To use a supported theme, type theme: THEME-NAME, replacing THEME-NAME with the name of the theme as shown in the README of the theme's repository. For a list of supported themes, see "Supported themes" on the GitHub Pages site.
The supported themes page is linking to the repository of each theme.
Some other themes are remote themes, e.g. Minimal. The repository explains how to add the theme:
To use the Minimal theme:
Add the following to your site's _config.yml:
remote_theme: pages-themes/minimal#v0.2.0
plugins:
- jekyll-remote-theme
You can have a look at https://github.com/cadamini/test/blob/main/_config.yml and the resulting page at https://cadamini.github.io/test/

Is it possible to add a single custom HTML page to an existing Hugo theme like Academic?

What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.

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.

Markdown to html automatically on a site

I know i can convert an MD file to HTML with a bunch of scripts.
I become part of a site which is hosted on github, and it has a place_holder.md file. I can view its content if i isit to place_holder domain. If i change anything in the md file, and i push it to the repo it get updated immediately. If i visit the place_holder.html i can see its content, even that the file is not in the github repo
So my question is:
Does github hoster stuff has an auto md converter which i cannot see? In this case where can i get something like this?
Do webbrowsers understand markdown by default? Then why dont i see place_holder.md in the url?
Thanks
If i visit the place_holder.html i can see its content, even that the file is not in the github repo
Of course you can look at the place_holder.html file it is an html file on your computer that your browser can render so you can view it.
Does github hoster stuff has an auto md converter which i cannot see?
I do not believe github has an "auto md converter".
In this case where can i get something like this?
You can use jekyll to convert your plain text and markdown to static html pages which you can host on the web. You also can get text editors to preview your markdown before you convert it into html which can be helpful. Here is one online text editor.
I'm not sure how you're asking to implement this, but take a look at marked. It's super easy to use and very flexible.

How to add icon for different file type in sublime 2

I want to switch my text editor to Sublime text 2 but the only issue cant let me do it.
I work with big projects and need very quick to navigate between files. ST2 sidebar doesnt support icon packs on such files .css, .html, ,php, .js etc. I found some article where the one guy explains how to do that - https://sublimetext.userecho.com/topic/19274-theming-of-the-sidebar/ I tried it but nothing happens. I tried do changes on the user-settings file. I suppose I do something wrong
If somebody knows how to do this please help
The newest stable version of Sublime Text 3 has sidebar themeing and many themes (not colour schemes) have added support for custom icons.
So upgrade to this: http://www.sublimetext.com/3
and then either use the default theme, or something like Soda theme to get custom sidebar icons.
For ST3 users. Adding icons for different file types and folders to default theme:
Download archive with icons. Or this one.
Go to Preferences > Browse Packages (In Windows find the Browse packages button to open the packages folder)
Copy(extract) folder from archive to packages folder. If you already have a
Theme - Default folder then just merge them.
Done. Thanks to Xavi Esteve