How to make code snippets highlighted, while taking advantage of Jekyll autogeneration on github pages side?
Is it possible to make it work with backticks notation?
Or do I have / should I , move to over notation of code blocks?
I have this very simple site (at given commit) gh-pages branch with _config.yml:
kramdown:
input: GFM
which I added to make newline to be newlines in my code snippets. (apart from this I can get rid of it).
I wanted to make code higlighted, but keep using backticks notation, can it? (Github preview highlights it properly, however generated page is just black)
P.S. Somehow "Add syntax highlighting to gh-pages" Q&A does not help as you see under links (or I do sth wrong).
Use jekyll highlight tag with this jekyll original pygment highlight css file.
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
You can also find a lot more css for pygment code highlighting.
Related
I am using Atom as an editor and pushed my code up to Github, but some of the indentation is randomly off. This is super embarrassing. Anyone know the fix?
For example, in Atom, one line looks like:
render() {
if (this.state.error)
return <p>Please enter a valid user.</p>
if (!this.state.userData) return <p>Loading</p>
And on Github, same line looks like:
render() {
if (this.state.error)
return <p>Please enter a valid user.</p>
if (!this.state.userData) return <p>Loading</p>
When I copied and pasted the second snippet of code from github, it pasted properly, the same as the first snippet, but is looking ugly in github. I recently reset my tabs from 4 spaces back to default 2, if that info is any help in resolving this.
Try never using the tab button to do the auto 2-space or 4-space thing, go back through the code, change all tabs to spaces, and try again.
This is a bug commonly found when cross-contaminating Python 2 and Python 3 code with non-matching workspaces, text editors, IDEs, and the like.
It's probably that you need to either use tabs ALL THE TIME or use spaces ALL THE TIME.
jsDoc seems to support most of the MD syntax, but when it comes to highlighting a single reserved word or text, I cannot find a usable tag for that.
In the MD syntax I can use `word`, which would set a grey background and a different font, so you can see it clearly, same as on StackOverflow - word.
In jsDoc, whether I use `word` or <code>word</code>, the effect is just setting italic style to the word, which cannot be clearly seen as a reserved word.
Is there any syntax in jsDoc to clearly highlight a word or a text string, like `some text` in MD, to look like some text?
Alternatively, is there a way to customize it - provide my own CSS for a standard MD tag?
JSDoc documentation seems to be using <code> tag, and it highlights the text using a grey background like you want by setting it on the code tag properties defined on the usejavadoc.css file:
From http://usejsdoc.org/tags-name.html:
There is a guide on how to edit or create your own JSDoc template, with a section on how to override the default template layout file:
http://usejsdoc.org/about-configuring-default-template.html#overriding-the-default-template-s-layout-file
But for something as simple as this, you don't even have to go that far. Just edit the css fragment, before or after generation, and set the background-color you want for the code tag. You may do it before generation by editing this line and setting the background color you want:
https://github.com/jsdoc3/jsdoc/blob/5a58bdf5a551844f12b46be6436aefd3c41e0393/templates/default/static/styles/jsdoc-default.css#L257
Or, if that doesn't work, overriding the property by adding
code {
background-color: #DEDEDE !important;
}
to the file.
As an alternative you can use a framework like qooxdoo to generate your documentation using JSDoc-like comments. According to their API reference you may use <pre class="javascript"> for inline javascript syntax code highlighting, and it looks pretty nice: http://manual.qooxdoo.org/3.0/pages/development/api_jsdoc_ref.html#html
I'm quite new to cc-mode and I'd like to configure it to allow me to freely format and use tabs in multiline comments. This is important to me because I want to use cog.py in my source file and need to be able to format the python source in the comment correctly. I'd be ok with comments not beeing autoindented at all, however I'd like to keep auto indenting the rest of the source code.
Example:
...
/*
[[[cog
import cog
for x in ['a','b','c']:
>cog.outl(x)
]]]
*/
...
In the line marked with > I'd like to press TAB to indent the line. cc-mode simply does nothing at all if i do so. I could use spaces there (which is inconvenient) but every (semi-)automatic re-indentation of this block would cause the spaces to vanish and therefore the python code to be incorrectly indented (which is what happens if i happen to press tab somewhere on this line after indenting it with spaces).
I tried to start emacs without my .init to be sure this is default behavior and not modified by my configuration so far. I've done google searches and read the documentation of the cc-mode variables / functions I stumbled upon (cc-mode online docs) while searching for a solution (i.e. c-indent-comments-syntactically-p, c-indent-command, c-tab-always-indent,...) but none of these seemed to solve my question.
EDIT1:
Thanks to abo-abo's idea of a "multi-major-mode" setup i've stumbled upon mmm-mode and have set up automatic switching to python mode for a cog section, which fixes most of my problems.
The only remaining problem is reindenting the whole file or a region containing a cog section. Can I somehow tell cc-mode to not change anything in comments while reindenting the file? mmm-mode + that would be a perfect solution for me.
You can use M-i to force a tab indent on the lines that you want, so you can use it to indent your comments.
You can also change your comments to use // instead. Just select your python code snippet, and do M-x comment-region:
// def foo(x):
// print 'hi'
Then the autoindent won't mess up your indentation.
I'm a big fan of the automated code formation (STRG + SHIFT + F) from eclipse. It makes your code so much more readable. However, now that I'm comenting my code, I'm getting the problem with Hyperlinks. Code formation adds line breaks anywhere in your code, so if you have e.g. a very long hyperlink it breaks into multiple lines and makes it unresolvable :(
Is there a way that eclipse doesn't format specific comment parts like Hyperlinks?
Regards,
Stefan
Code formating doesn't put line breaks in links inside a tags:
<a href=
"http://www.example.com/very-long-url">Example</a>
There is a line break just after the href=, so it may look ugly in a paragraph. Enclosing urls in <tt> tags prevents line breaks, but the url won't be a clickable link. Combine both and you get hyperlinks without line breaks. If they exceed the maximum line length, they will start on a new line though.
<tt>Example</tt>
There is also //#formatter:off to disable formatting for the following lines and //#formatter:on to enable it again.
I don't think there is any way from setting that up in the menu. The workaround is to disable block or line comment formatting in the formatter profile:
Window -> Preferences -> Java -> Code Style -> Formatter -> Edit -> tab Comments
As pointed out by Kheldar, you can always customise/extend the Java Codeformatter using the extension point, but that's probably not a one hour job for someone unfamiliar with the JDT.
Please indicate, if you need any assistance coding an extension for the formatter.
Is there an easy way to add syntax highlighting to my various plugin's gh-pages using github's Pygments?
I know that every page runs through the Jekyll engine and provides syntax highlighting (ref). But I don't want to install a blog. I just want syntax highlighting applied to the code blocks in my gh-pages.
I guess I could always just include a different plugin with my gh-pages...
Pages already does pygments, there's nothing to install. Just use it!
---
layout: default
title: Something with codes
---
Happy fun highlighting.
[More details](https://github.com/mojombo/jekyll/wiki/liquid-extensions)
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
"GitHub Pages now only supports Rouge, a pure-Ruby syntax highlighter" so you only need to change 'kramdown' syntax highligher to use 'rouge' in your _config.yml file.
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge
Found this thread as the first hit while trying to figure out syntax highlighting, and I found an even easier way to do it that I thought I'd share. Just put the name of the language you want highlighted after the fenced code blocks (reference). No need to generate any css or use yaml.
This is regular text
```ruby
# This is highlighted code
def foo
puts 'foo'
end
```
```python
# Here is some in python
def foo():
print 'foo'
```
As pointed out by #David Douglas, "GitHub Pages now only supports Rouge, a pure-Ruby syntax highlighter"
You have to put this in you _config.yml. This is from the _config.yml of Barry Clark's Jekyll Now
# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
syntax_highlighter_opts:
# Use existing pygments syntax highlighting css
css_class: 'highlight'
Then for the code highlighting part...
The list of langauge aliases for Rouge are listed here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers
It uses all-lowercase latters.
For example, for JavaScript:
``` javascript
function test() {
console.log("test");
}
```
The default syntax highlighter is rouge (equivalent to highlighter: rouge in your _config.yml file). With rouge, if you write a code block like this in markdown:
~~~js
let z = 26;
~~~
You can expect to get an HTML block like this:
<div class="language-js highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>
<span class="kd">let</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">26</span><span class="p">;</span>
</code></pre>
</div>
</div>
Then all you need is a CSS file (if you're using a GitHub Pages Theme, you will get the CSS automatically). I'm not sure where the CSS is officially supposed to come from, but
here is a CSS file for a light background
here is a CSS file for code in a dark rounded rect (the rest of the site may use a light or dark background).
Feel free to customize the css to your liking.