If I did:
{% highlight C %}
.... code
{% endhighlight %}
For any tab I use between the highlighted C, I'd like the tab size to be 2 rather than 4. Doing {% highlight C tabsize=2 %} doesn't seem to work in Jekyll 3.
The answers I have seen on SO seem to work for older versions, but not recent versions.
I don't believe it's possible from Jekyll itself, but you can accomplish this with CSS using the tab-size attribute:
pre {
tab-size: 2;
}
In my Jekyll3 blog, I use the highlight Liquid Tag to display syntax-highlighted code with fine line numbering. This is accomplished by doing:
{% highlight python linenos %}
# some code goes here
{% endhighlight %}
Now I often put several code blocks such as this in any given post. Let's suppose that the first code block has N lines, how can I have the second code block to start at line number (N+1)?
I know this can be done manually by providing the starting line value to the option startinline on the highlight tag, but I would want to accomplish this automatically.
I'm trying to make text which is either invisible until moused over, or, has a "show" / "hide" button, or some other thing, so that it is not visible until the user interacts with it in some way.
I'm trying to do this on a github wiki page. (Specifically it's for a short self-quiz.)
Basically I want to get a similar effect to what SO achieves with the >! markup:
Hoho! Spoiler text!
as described in these meta posts.
The same markup doesn't work in github, I guess that it's an SO extension?
I saw this issue about using spoiler text in comments on github, which was closed, but I thought there might be a different answer for the wiki pages, or a different solution based on HTML or something?
Does anyone know if there's a way to do this, or if it is definitely unfortunately impossible?
GFM supports a subset of HTML. For now, you can wrap your question in a <summary> and your answer in any standard HTML tag like <p> and wrap the whole thing in the <details> tag.
So if you do this
<details>
<summary>Q1: What is the best Language in the World? </summary>
A1: JavaScript
</details>
You get this -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test
Browser support is an Issue.
The thing with GitHUB wiki is that it allows you write text in other formats like AsciiDoc, RST etc. Probabaly there's solution in those too. These are 2 formats that are far more feature rich than Markdown.
Building on Gaurav's answer and this GH issue here's a way to use advanced formatting inside the <details> tag on GitHub:
Note: original answer from 2016 required <p>, since 2017 that requirement is an empty line after </summary> (i.e. before expanded contents). Somewhere along the line leading up to 2019, markdown in <summary> is not working any more either. You can see it's quite flaky as it's a hack/workaround, not a supported feature/use case. Also note that issue/PR comments support different formatting than Wikis (e.g. 2020 April underline in summary only works on Wiki, not on issues).
<details>
<summary>stuff with *mark* **down** in `summary` doesn't work any more, use HTML <i>italics</i> and <b>bold</b> instead in <code><summary></code> (<i>click to expand</i>)</summary>
<!-- have to be followed by an empty line! -->
## *formatted* **heading** with [a](link)
```java
code block
```
<details>
<summary><u>nested</u> <b>stuff</b> (<i>click to expand</i>)</summary>
<!-- have to be followed by an empty line! -->
A bit more than normal indentation is necessary to get the nesting correct,
1. list
1. with
1. nested
1. items
```java
// including code
```
1. blocks
1. and continued non-nested
</details>
</details>
Currently it renders as the following with the expected parts expandable and collapsible:
Initial state
Click on summary
Click on nested summary
Literal spoiler text as shown in the question is not supported in GitHub Flavored Markdown or the original Markdown implementation.
However Markdown supports inline HTML, and GitHub allows a subset of HTML tags to remain in the rendered output. As described in other answers, <details> works on GitHub.
If that's "spoilery" enough for you, feel free to use it.
The html element <details> and <summary> can do it, have a look:
http://caniuse.com/#search=details
Support is poor for Firefox & Edge, but there may be some pollyfills...
If editing the CSS is an option for you, you can simply use
[](#spoiler "Spoiler Filled Text")
and then use (pure) CSS to give the correct appearance.
a[href="#spoiler"] {
text-decoration: none !important;
cursor: default;
margin-bottom: 10px;
padding: 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
display: inline-block;
}
a[href="#spoiler"]::after {
content: attr(title);
color: #FFF8DC;
padding: 0 0.5em;
}
a[href="#spoiler"]:hover::after,
a[href="#spoiler"]:active::after {
cursor: auto;
color: black;
transition: color .5s ease-in-out;
}
<p>
</p>
(Vaguely inspired from this code)
A different solution from the details / summary tags, but also using native html is to use a span with a title. I was doing something like this recently in org mode.
GitHub Pages Jekyll use Pygments by default to render syntax highlighting for code blocks. But I prefer an easier alternative highlight.js to do the job because I only need to indent 4 spaces to mark code blocks in the markdown source files.
However, my R code are all mistakenly interpreted as php or perl or makefile or other type of code by highlight.js, and I want to manually mark the code block by
```r
(some r code)
```
instead. But when I use this, the first line of the code block always appears to be a blank line. I view the HTML source code produced by the 4-space mark, it is like
<pre><code>x <- rnorm(100)
y <- 2*x + rnorm(100)
lm(formula=y~x)
</code></pre>
which does not suffer from this problem.
How can I eliminate the blank line in the first line of the code block?
I face the same issue today when I change my highlighter to highlight.js.
With the help from others, I finally git rid of this blank line, and willing to share the solution. Basically, the whitespace inside <pre> is not trimmed, and be treated as a newline in the rendered page (you can use firebug extension of Firefox enabled with show whitespace to observe the extra line).
Then the solution is obvious.
put pre and code tags at the same line with your actual code. like this:
<pre><code class="css">#font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
or using solution provided by mhulse to make your raw post more readable
<pre><code
>line of code
Here and ...
Here
</code></pre>
Write your own js code to trim L/R whitespace(s) of your content before it be put in <pre>
For more details, check this page.
How can I number the code lines which are highlighted using pygments in Jekyll?
According to the Liquid Extensions wiki page of the Jekyll documentation, the highlight Liquid tag has an optional second parameter, which may have the value linenos to turn on line numbering:
{% highlight language linenos %}
your code here
{% endhighlight %}
Use it with caution. With linenos the line numbers are actually inserted in the code's text, so will be impossible to copy the code block without them. (This could be solved by letting the visitor to $('.lineno').toggle() the line numbers' visibility. Works in Firefox, not sure if is portable.)
Update: Better use linenos=table:
{% highlight language linenos=table %}
your code here
{% endhighlight %}
That will place the code in a table with two cells: first td all the line numbers, second td the code itself. This makes possible to select only the code, without the line numbers.