You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tutorials/markdown_syntax_highlighting/README.md
+30-32Lines changed: 30 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
[Sebastian Raschka](http://sebastianraschka.com)
2
2
3
3
last updated: 05/28/2014
4
-
4
+
test
5
5
<hr>
6
6
I would be happy to hear your comments and suggestions.
7
7
Please feel free to drop me a note via
@@ -14,7 +14,7 @@ Please feel free to drop me a note via
14
14
<br>
15
15
<br>
16
16
17
-
In this little tutorial, I want to show you in 5 simple steps how easy it is to add code syntax highlighting to your blog articles.
17
+
In this little tutorial, I want to show you in 5 simple steps how easy it is to add code syntax highlighting to your blog articles.
18
18
19
19
There are more sophisticated approaches using static site generators, e.g., [nikola](https://github.com/getnikola/nikola), but the focus here is to give you the brief introduction of how it generally works.
20
20
@@ -32,28 +32,28 @@ The two packages that we will use are
32
32
33
33
-[Pygments](http://pygments.org)
34
34
35
-
Just as the name suggests, Python-Markdown is the Python package that we will use for the Markdown to HTML conversion.
35
+
Just as the name suggests, Python-Markdown is the Python package that we will use for the Markdown to HTML conversion.
36
36
The second library, Pygments, will be used to add the syntax highlighting to the code blocks.
37
37
Conveniently, both libraries can be installed via `pip`:
38
38
39
39
40
40
pip install markdown
41
-
41
+
42
42
and
43
43
44
44
pip install Pygments
45
45
46
46
47
47
(For alternative ways to install the Python-Markdown package, please see [the
@@ -79,7 +79,7 @@ explicitly. One way to do this would be:
79
79
:::python
80
80
print("Hello, World")
81
81
82
-
or we can highlight certain lines to
82
+
or we can highlight certain lines to
83
83
draw the reader's attention:
84
84
85
85
:::python hl_lines="1 5"
@@ -88,7 +88,7 @@ draw the reader's attention:
88
88
for letter in "this is a test":
89
89
print(letter)
90
90
# I want to be highlighted, too!
91
-
91
+
92
92
</pre>
93
93
</div>
94
94
@@ -101,36 +101,36 @@ So in the case of C++, for example:
101
101
102
102
:::c++
103
103
#include <iostream>
104
-
104
+
105
105
int main()
106
106
{
107
107
std::cout << "Hello, world!" << std::endl;
108
108
return 0;
109
109
}
110
-
110
+
111
111
112
112
Since the CodeHilite extension in Python-Markdown uses Pygments, every programming language that is [listed here](http://pygments.org/languages/) currently has support for syntax highlighting.
113
113
114
114
115
115
<br>
116
-
<br>
117
-
118
-
## 3 - Converting the Markdown document to HTML
119
-
116
+
<br>
117
+
118
+
## 3 - Converting the Markdown document to HTML
119
+
120
120
121
121
After we created our Markdown document, we are going to use Python-Markdown directly from the command line to convert it into an HTML document.
122
-
122
+
123
123
Note that we can also import Python-Markdown as a module in our Python scripts, and it comes with a rich repertory of different functions, which are [listed in the library reference](https://pythonhosted.org/Markdown/reference.html).
124
-
124
+
125
125
The basic command line usage to convert a Markdown document into HTML would be:
126
126
127
127
python -m markdown input.md > output.html
128
-
128
+
129
129
However, since we want to have syntax highlighting for our Python code, we will use Python-Markdown's [CodeHilite extension](http://pythonhosted.org/Markdown/extensions/code_hilite.html) by providing an additional `-x codehilite` argument on the command line:
This will create the HTML body with our Markdown code converted to HTML with the Python code blocks annotated for the syntax highlighting.
135
135
136
136
@@ -144,20 +144,20 @@ If we open the [**body.html**](https://github.com/rasbt/python_reference/blob/ma
144
144

145
145
146
146
What is missing is the CSS code for adding the colors to our annotated Python code block. But we can simply create such a CSS file via `Pygments` from the command line.
147
-
147
+
148
148
pygmentize -S default -f html > codehilite.css
149
-
149
+
150
150
Note that we usually only need to create the [**codehilite.css**](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/codehilite.css) file once and insert a link in all our HTML files that we created via Python-Markdown to get the syntax coloring
151
151
152
-
152
+
153
+
<br>
153
154
<br>
154
-
<br>
155
-
156
-
155
+
156
+
157
157
## 5 - Insert into your HTML body
158
-
159
158
160
-
In order to include a link to the [codehilite.css](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/codehilite.css) file for syntax coloring in our converted HTML file, we have to add the following line to the header section.
159
+
160
+
In order to include a link to the [codehilite.css](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/codehilite.css) file for syntax coloring in our converted HTML file, we have to add the following line to the header section.
161
161
162
162
163
163
@@ -167,10 +167,10 @@ In order to include a link to the [codehilite.css](https://github.com/rasbt/pyth
167
167
Now, we can insert the HTML body ([body.html](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/body.html)), which was created from our Markdown document, directly into our final HTML file (e.g., our blog article template).
@@ -186,7 +186,7 @@ Now, we can insert the HTML body ([body.html](https://github.com/rasbt/python_re
186
186
</body>
187
187
</html>
188
188
189
-
</code>
189
+
</code>
190
190
191
191
If we open our [**final.html**](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/template.html) file in our web browser now, we can the pretty Python syntax highlighting.
192
192
@@ -205,5 +205,3 @@ If we open our [**final.html**](https://github.com/rasbt/python_reference/blob/m
205
205
-[pygments.org](http://pygments.org)
206
206
207
207
-[languages supported](http://pygments.org/languages/) by Pygments
0 commit comments