Skip to content

Commit df2c3b3

Browse files
committed
Update README.md
1 parent b0bd985 commit df2c3b3

1 file changed

Lines changed: 30 additions & 32 deletions

File tree

  • tutorials/markdown_syntax_highlighting

tutorials/markdown_syntax_highlighting/README.md

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[Sebastian Raschka](http://sebastianraschka.com)
22

33
last updated: 05/28/2014
4-
4+
test
55
<hr>
66
I would be happy to hear your comments and suggestions.
77
Please feel free to drop me a note via
@@ -14,7 +14,7 @@ Please feel free to drop me a note via
1414
<br>
1515
<br>
1616

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.
1818

1919
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.
2020

@@ -32,28 +32,28 @@ The two packages that we will use are
3232

3333
- [Pygments](http://pygments.org)
3434

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.
3636
The second library, Pygments, will be used to add the syntax highlighting to the code blocks.
3737
Conveniently, both libraries can be installed via `pip`:
3838

3939

4040
pip install markdown
41-
41+
4242
and
4343

4444
pip install Pygments
4545

4646

4747
(For alternative ways to install the Python-Markdown package, please see [the
4848
documentation](http://pythonhosted.org/Markdown/install.html))
49-
49+
5050

5151
<br>
5252
<br>
5353

5454
##2 - Writing a Markdown document
5555

56-
Now, let us compose a simple Markdown document including some Python code blocks in any/our favorite Markdown editor.
56+
Now, let us compose a simple Markdown document including some Python code blocks in any/our favorite Markdown editor.
5757

5858

5959
--> [**some_markdown.md**](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/some_markdown.md)
@@ -79,7 +79,7 @@ explicitly. One way to do this would be:
7979
:::python
8080
print("Hello, World")
8181

82-
or we can highlight certain lines to
82+
or we can highlight certain lines to
8383
draw the reader's attention:
8484

8585
:::python hl_lines="1 5"
@@ -88,7 +88,7 @@ draw the reader's attention:
8888
for letter in "this is a test":
8989
print(letter)
9090
# I want to be highlighted, too!
91-
91+
9292
</pre>
9393
</div>
9494

@@ -101,36 +101,36 @@ So in the case of C++, for example:
101101

102102
:::c++
103103
#include <iostream>
104-
104+
105105
int main()
106106
{
107107
std::cout << "Hello, world!" << std::endl;
108108
return 0;
109109
}
110-
110+
111111

112112
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.
113113

114114

115115
<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+
120120

121121
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+
123123
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+
125125
The basic command line usage to convert a Markdown document into HTML would be:
126126

127127
python -m markdown input.md > output.html
128-
128+
129129
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:
130130

131131

132132
python -m markdown -x codehilite some_markdown.md > body.html
133-
133+
134134
This will create the HTML body with our Markdown code converted to HTML with the Python code blocks annotated for the syntax highlighting.
135135

136136

@@ -144,20 +144,20 @@ If we open the [**body.html**](https://github.com/rasbt/python_reference/blob/ma
144144
![](./images/mk_syntax_body_html.png)
145145

146146
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+
148148
pygmentize -S default -f html > codehilite.css
149-
149+
150150
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
151151

152-
152+
153+
<br>
153154
<br>
154-
<br>
155-
156-
155+
156+
157157
## 5 - Insert into your HTML body
158-
159158

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.
161161

162162

163163

@@ -167,10 +167,10 @@ In order to include a link to the [codehilite.css](https://github.com/rasbt/pyth
167167
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).
168168

169169

170-
[**template.html**](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/template.html):
171-
170+
[**template.html**](https://github.com/rasbt/python_reference/blob/master/tutorials/markdown_syntax_highlighting/template.html):
171+
172172
<code>
173-
173+
174174
<!DOCTYPE html>
175175
<html lang="en">
176176

@@ -186,7 +186,7 @@ Now, we can insert the HTML body ([body.html](https://github.com/rasbt/python_re
186186
</body>
187187
</html>
188188

189-
</code>
189+
</code>
190190

191191
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.
192192

@@ -205,5 +205,3 @@ If we open our [**final.html**](https://github.com/rasbt/python_reference/blob/m
205205
- [pygments.org](http://pygments.org)
206206

207207
- [languages supported](http://pygments.org/languages/) by Pygments
208-
209-

0 commit comments

Comments
 (0)