Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3d02356

Browse files
committed
Improve indented code block styling
- Include indented code block example- Improve `{% highlight linenos %}` styling-Closemmistakes#90,closemmistakes#92
1 parent0f1a778 commit3d02356

File tree

3 files changed

+101
-93
lines changed

3 files changed

+101
-93
lines changed

‎_posts/2013-08-16-code-highlighting-post.md‎

Lines changed: 47 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,50 @@ Syntax highlighting is a feature that displays source code, in different colors
1414

1515
[^1]:<http://en.wikipedia.org/wiki/Syntax_highlighting>
1616

17-
###Highlighted Code Blocks
17+
###GFM Code Blocks
1818

19-
To modify styling and highlight colors edit`/_sass/_syntax.scss`.
19+
GitHub Flavored Markdown[fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported.To modify styling and highlight colors edit`/_sass/syntax.scss`.
2020

2121
```css
2222
#container {
23-
float:left;
24-
margin:0-240px00;
25-
width:100%;
23+
float:left;
24+
margin:0-240px00;
25+
width:100%;
2626
}
2727
```
2828

29+
{% highlight scss %}
30+
.highlight {
31+
margin: 0;
32+
padding: 1em;
33+
font-family: $monospace;
34+
font-size: $type-size-7;
35+
line-height: 1.8;
36+
}
37+
{% endhighlight %}
38+
2939
```html
3040
{% raw %}<navclass="pagination"role="navigation">
31-
{% if page.previous %}
32-
<ahref="{{ site.url }}{{ page.previous.url }}"class="btn"title="{{ page.previous.title }}">Previous article</a>
33-
{% endif %}
34-
{% if page.next %}
35-
<ahref="{{ site.url }}{{ page.next.url }}"class="btn"title="{{ page.next.title }}">Next article</a>
36-
{% endif %}
41+
{% if page.previous %}
42+
<ahref="{{ site.url }}{{ page.previous.url }}"class="btn"title="{{ page.previous.title }}">Previous article</a>
43+
{% endif %}
44+
{% if page.next %}
45+
<ahref="{{ site.url }}{{ page.next.url }}"class="btn"title="{{ page.next.title }}">Next article</a>
46+
{% endif %}
3747
</nav><!-- /.pagination-->{% endraw %}
3848
```
3949

50+
{% highlight html linenos %}
51+
{% raw %}<navclass="pagination"role="navigation">
52+
{% if page.previous %}
53+
<ahref="{{ site.url }}{{ page.previous.url }}"class="btn"title="{{ page.previous.title }}">Previous article</a>
54+
{% endif %}
55+
{% if page.next %}
56+
<ahref="{{ site.url }}{{ page.next.url }}"class="btn"title="{{ page.next.title }}">Next article</a>
57+
{% endif %}
58+
</nav><!-- /.pagination-->{% endraw %}
59+
{% endhighlight %}
60+
4061
```ruby
4162
moduleJekyll
4263
classTagIndex <Page
@@ -57,64 +78,25 @@ module Jekyll
5778
end
5879
```
5980

81+
###Code Blocks in Lists
6082

61-
###Standard Code Block
62-
63-
{% raw %}<nav class="pagination" role="navigation">
64-
{% if page.previous %}
65-
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
66-
{% endif %}
67-
{% if page.next %}
68-
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
69-
{% endif %}
70-
</nav><!-- /.pagination -->{% endraw %}
71-
72-
73-
###Fenced Code Blocks
83+
Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g.,`1.`). Usually this will mean indenting 3 spaces instead of 4.
7484

75-
To modify styling and highlight colors edit`/_sass/_coderay.scss`. Line numbers and a few other things can be modified in`_config.yml`. Consult[Jekyll's documentation](http://jekyllrb.com/docs/configuration/) for more information.
76-
77-
~~~css
78-
#container {
79-
float:left;
80-
margin:0-240px00;
81-
width:100%;
82-
}
83-
~~~
84-
85-
~~~html
86-
{% raw %}<navclass="pagination"role="navigation">
87-
{% if page.previous %}
88-
<ahref="{{ site.url }}{{ page.previous.url }}"class="btn"title="{{ page.previous.title }}">Previous article</a>
89-
{% endif %}
90-
{% if page.next %}
91-
<ahref="{{ site.url }}{{ page.next.url }}"class="btn"title="{{ page.next.title }}">Next article</a>
92-
{% endif %}
93-
</nav><!-- /.pagination-->{% endraw %}
94-
~~~
95-
96-
~~~ruby
97-
moduleJekyll
98-
classTagIndex <Page
99-
definitialize(site,base,dir,tag)
100-
@site= site
101-
@base= base
102-
@dir= dir
103-
@name='index.html'
104-
self.process(@name)
105-
self.read_yaml(File.join(base,'_layouts'),'tag_index.html')
106-
self.data['tag']= tag
107-
tag_title_prefix= site.config['tag_title_prefix']||'Tagged:'
108-
tag_title_suffix= site.config['tag_title_suffix']||'&#8211;'
109-
self.data['title']="#{tag_title_prefix}#{tag}"
110-
self.data['description']="An archive of posts tagged#{tag}."
111-
end
112-
end
113-
end
114-
~~~
85+
1. Do step 1.
86+
2. Now do this:
87+
88+
```ruby
89+
defprint_hi(name)
90+
puts"Hi,#{name}"
91+
end
92+
print_hi('Tom')
93+
#=> prints 'Hi, Tom' to STDOUT.
94+
```
95+
96+
3. Now you can do this.
11597

11698
###GitHub Gist Embed
11799

118100
An example of a Gist embed below.
119101

120-
<scriptsrc="https://gist.github.com/mmistakes/43a355923921d22cd993.js"></script>
102+
{%gistmmistakes/6589546 %}

‎_sass/_syntax.scss‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,51 @@
22
Syntax Highlighting
33
==========================================================================*/
44

5-
pre.highlight {
6-
padding:1em;
5+
div.highlighter-rouge,
6+
figure.highlight {
7+
position:relative;
8+
margin-bottom:1.5em;
9+
color:#d0d0d0;
10+
@includefont-rem(12);
11+
line-height:1.5;
12+
border:1pxsoliddarken($body-color,5);
13+
border-radius:3px;
14+
background-color:#272822;
15+
16+
.highlight {
17+
margin:0;
18+
padding:1em;
19+
}
20+
}
21+
22+
figure.highlight {
23+
padding-left:1em;
24+
padding-right:1em;
25+
}
26+
27+
.highlighttable {
28+
font-size:1em;
29+
border:0;
30+
31+
td {
32+
padding:5px;
33+
border:0;
34+
35+
// line numbers
36+
&.gutter {
37+
padding-right:1em;
38+
color:#ccc;
39+
}
40+
}
41+
42+
pre {
43+
margin:0;
44+
}
745
}
846

9-
.highlight {
10-
margin-bottom:1.5em;
11-
@includefont-rem(12);
12-
line-height:1.5;
13-
color:#d0d0d0;
14-
border:1pxsoliddarken($body-color,5);
15-
background-color:#272822;
16-
border-radius:3px;
47+
.highlightpre {width:100%; }
1748

18-
pre {
19-
position:relative;
20-
margin:0;
21-
padding:1em;
22-
}
49+
.highlight {
2350

2451
.lineno {padding-right:24px;color:#8f908a;}
2552
.hll {background-color:#49483e }

‎_sass/_typography.scss‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -108,19 +108,18 @@ tt, code, kbd, samp, pre {
108108
font-family:$code-font;
109109
}
110110

111-
p,
112-
li {
113-
114-
code {
115-
@includefont-rem(12);
116-
line-height:1.5;
117-
white-space:nowrap;
118-
margin:02px;
119-
padding:05px;
120-
border:1pxsolidlighten(#000,90);
121-
background-color:lighten(#000,95);
122-
border-radius:3px;
123-
}
111+
p >code,
112+
a >code,
113+
li >code,
114+
figcaption >code,
115+
td >code {
116+
margin:02px;
117+
padding:05px;
118+
@includefont-rem(12);
119+
line-height:1.5;
120+
border:1pxsolidlighten(#000,90);
121+
background-color:lighten(#000,95);
122+
border-radius:3px;
124123
}
125124

126125
pre {

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp