I made my github blog.
I want to change my syntax highlighter to rouge.
I do this.
gem install rouge
rougify style monokai.sublime > assets/css/syntax.css
//default.html
link href="{{ site.baseurl }}/assets/css/syntax.css" rel="stylesheet" />
// _config.yml
markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
syntax_highlighter_opts:
default_lang: html
css_class : 'syntax'
But my blog's syntax highlighter stay none.
How can I change this?
https://github.com/azzyjk/azzyjk.github.io.
https://azzyjk.github.io/GithubBlog_2/
Chrome DevTools Picture
You're mixing up the command line instructions with the jekyll instructions. Also it seems that your command rougify style monokai.sublime does not work properly as if I look at the CSS file in your blog it says unknown theme: monokaisubline (https://azzyjk.github.io//assets/css/syntax.css).
So easiest solution just c&p one of these CSS stylesheets into your style.css files https://github.com/jwarby/jekyll-pygments-themes.
Here are the Jekyll docs https://jekyllrb.com/docs/liquid/tags/#code-snippet-highlighting
Edit:
As CSS is now correct but the correct CSS classes are not applied to your code snippets, can you try to set your syntax highlighter in your jekyll config.
kramdown:
syntax_highlighter: rouge
input: GFM
Related
I already have a blog maintained by wordpress. Now, I am planning to move my blog posts to jekyll.
I already forked jekyll basic blog template from jekyllnow
and then I tried to import all my blog posts from wordpress to jekyll using Wordpress to jekyll exporter plugin as explained in this smashing magazine article.
To export from WordPress, I’d highly recommend Ben Balter’s one-click WordPress to Jekyll Exporter plugin.
This didn't work for me.
So, my second attempt was to export the wordpress posts in an xml file as explained in the same smashing magazine article.
The other option is to export all content in the “Tools” menu of the WordPress dashboard, and then importing it with Jekyll’s importer.
So, I first exported only my posts from wordpress to xml.
Wordpress Admin -> Tools -> Export -> checked posts -> Download xml file
and placed that xml file in my project folder, which is with directory name kamlekar.github.io.
and then in Ruby's command prompt, I cd to my project folder and run the following code as shown in the below image:
As you can see, I am getting the following error:
-e:1: syntax error, unexpected '=', expecting tASSOC
The command I wrote is
ruby -rubygems -e 'require "jekyll-import"; JekyllImport::Importers::WordpressDotCom.run({ "source" => "wpexport.xml"} )
I am not sure why this error is coming. I already installed gem install github-pages and gem install jekyll-import.
Here is a dummy xml file to reproduce the issue.
I am on Windows 8 with Ruby 1.9.2 installed.
I ran the same code in irb (Interactive Ruby)
$ irb
It gave me some detailed error that I need to install hpricot. So, I installed hpricot.
irb > exit
$ cd <project_folder>
$ gem install hpricot
But still the ruby command prompt was giving me error. So, I ran the importer code through irb. As explained by Wayne
$ irb
irb> require "jekyll-import"; JekyllImport::Importers::WordpressDotCom.run({ "source" => "wpexport.xml"} )
That worked!!
But still in my imported posts, there were characters like }); at the top-left of page. Which I removed by visiting each post file in _posts/and removed options: {} line from the meta content of the posts.
Thanks to Jonathan and Wayne for there support in Ruby chatroom.
I've been trying to setup SASS (and Bourbon.io) with jekyll for a personal blog on github pages.
I've changed the name of the css folder that is installed with jekyll to stylesheets and within stylesheets I have two folders, css and sass.
I start my jekyll server locally with: jekyll serve --watch
Then in another terminal window: sass --watch stylesheets/sass:stylesheets/css
But I am now getting the following message:
`/' not found.
Prior to attempting to setup SASS with my jekyll project, my site was displaying. Any links for setting up sass with jekyll would be helpful. Thanks.
New in Jekyll 2.0 is native processing of Sass and CoffeeScript:
http://jekyllrb.com/docs/assets/#sassscss
hope not being to late, for what you are pretending there are many approaches for example i use bourbon, neat in a jekyll project and use grunt tasks for local development.
Another option is to use a rakefile with some task to handle both programs (jekyll and sass) or as favrizio suggested use jekyll's pluging.
I reccomend you to take a look to grunt.
This happens usually if you have messed with the site baseurl in the _config.xml and it can no longer resolve itself to find the index.html.
I'm trying to use Twitter Bootstrap for SASS, but at the moment it's not integrated into a Rails project, and I don't I need the stuff I'd get from Compass. I (think I) want a Ruby script that will generate my CSS, JS and Font files and put them in the right places, but having spent a couple of hours going round in circles with the docs, I can't figure this out.
I have a directory like:
site/
css/
bootstrap_variables.scss
application.scss
site.scss
fonts/
index.html
js/
css/bootstrap_variables.scss contains my custom variations on Bootstrap's default variables.
css/site.scss contains the site-specific, non-Bootstrap, CSS.
css/application.scss looks something like this:
#import "bootstrap_variables.scss";
// Import Bootstrap modules I need, but not others.
#import "bootstrap/variables";
#import "bootstrap/mixins";
// ... etc
#import "site.scss"
I've installed the bootstrap-sass gem. And now I want a script that does:
Process css/application.scss with SASS and outputs css/application.css.
Put the Bootstrap JavaScript I need into a single file in js/. (How do I specify which JS modules I need?)
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
If this sounds like madness, and I'm going about this entirely wrong, feel free to tell me that too!
And now I want a script that does:
I'm not sure why you need this script at all. Cause if you can run the script you also can install sass and run sass css/application.scss css/application.css. You can install all bootstrap's file in your site folder by running bower install bootstrap-sass and then run the sass command with --load-path option which should point to your bower_components folder. You can also copy / or link the required javascripts and font from the bower_components folder.
Or consider to use Gulp or Grunt to set up your build chain.
But you can use Sass programmatically indeed.
Process css/application.scss with SASS and outputs css/application.css.
Your script.rb should look something like that shown below:
/usr/bin/env ruby
require 'sass'
require 'bootstrap-sass'
sass_engine = Sass::Engine.for_file('css/application.scss',{
:style => :compact,
:syntax => :scss
})
output = sass_engine.render
File.open("css/application.css", 'w+') {|f| f.write(output) }
Notice that you also should have to integrate the autoprefixer.
Put the Bootstrap JavaScript I need into a single file in js/
After installing the bootstrap-sass gem you can read the javascript files from the gem (see: How to find the path a Ruby Gem is installed at (i.e. Gem.lib_path c.f. Gem.bin_path)).
So the get the content of the affix plugin you can use:
file = File.new(Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/javascripts/bootstrap/affix.js", "r")
You you can read the required script, concatenate their content, minify and copy
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
As above, copy them from Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/fonts
I'd love to use Bourbon with LiveReload but I can't seem to get them to work together. Anybody successfully made these two play nice?
If you use the 'Run a custom command after processing changes' option rather than the standard compilation option, then you can use the commands as detailed on the readme.
# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
I wrote a blog post covering this.
If you install the latest version (3.0.0) of Bourbon and install bourbon into your compass sass directory:
bourbon install --path ./sass
You can then use LiveReload with one small tweak. You will need to replace LiveReload's version of SASS with at least 3.2.3, since Bourbon requires this.
Instructions on how to replace LiveReload's default SASS version can be found here: http://carl-topham.com/theblog/post/changing-version-sass-livereload/
This seems to work for me.
I've been told you can get it to work by passing the lib/bourbon.rb file into the "Run a custom command" option in LiveReload. See attached image.
I'm following an article here:
http://gom-jabbar.org/articles/2009/02/04/don-t-use-css-or-table-layout-use-sass-ad-compass
more specifically the section entitled "Concrete Example of using
Compass and Sass for creating a layout that people generally use
tables for"
The example references #import blueprint.sass
Where is this file located as my webby project does not seem to be able to find it.
(Also note that I'm using Ubuntu)
My layout.sass file looks like this (nothing fancy):
---
filter: sass
extension: css
layout: nil
---
#import blueprint.sass
body
+blueprint-typography
I get the following error when running webby:
create output/stylesheets/layout.css
[22:56:30] ERROR: while rendering page 'content/stylesheets/layout.sass'
[22:56:30] ERROR: sass filter error: "File to import not found or unreadable: blueprint.sass."
Definitely need to upgrade to the latest edge haml. That was a bug in how comments get parsed that was fixed in the last month or so.
git checkout git://github.com/nex3/haml.git
cd haml
rake install
Alright figured it out...
You have to download/install the most recent installation of haml which isn't yet specified on the compass primer
This should actually be the first step in installing it!
And here is how that step goes:
Download the latest version of HAML with the following command: git clone git://github.com/nex3/haml.git
(This will create a new directory ./haml/)
Change to the ./haml/ directory.
In the ./haml/ directory type the following command: rake install