// hello.go, jpad 2018
package main
import (
"fmt"
)
func main() {
fmt.Println("Hello, World!")
}
Note: replace tabs with multiple spaces when dealing with material that is sensitive to precise layout. In the HTML world with its many flaws, tabs are often replaced by single spaces, behind your back! Most code editors can be set up to use spaces instead of tabs for indentation.
Sadly there is no standard tool in the Blogger editor to mark text as source code and get special formatting, but there are several ways to achieve that nonetheless. Let's have a look at some approaches.
The above code snippet is displayed using the Courier font that was manually applied to the selected text. This might suffice. It is perhaps the simplest solution.
HTML has a <code>...</code> tag to use when displaying source code. Let's switch to the HTML view in the Blogger editor and try it out:
// hello.go, jpad 2018
package main
import (
"fmt"
)
func main() {
fmt.Println("Hello, World!")
}
That's obviously no good. The code block uses a monospace font, but tabs and line breaks aren't honoured. It works better when using <pre><code>...</code></pre> as follows:
// hello.go, jpad 2018
package main
import (
"fmt"
)
func main() {
fmt.Println("Hello, World!")
}
There are some online code formatters available. You paste your code snippet in an input field on their site, push a button and your formatted code appears, usually both as rendered HTML and raw HTML. You can copy the raw HTML code and past that in the Blogger HTML view. Try out a few of them.
http://codeformatter.blogspot.com/ generates this:
// hello.go, jpad 2018
package main
import (
"fmt"
)
func main() {
fmt.Println("Hello, World!")
}
Simple and straightforward. The tab width can be set when doing the formatting, and it is stable, also after saving the blog and re-opening it.
http://hilite.me/ generates this:
// hello.go, jpad 2018 package main import ( "fmt" ) func main() { fmt.Println("Hello, World!") }
The hilite formatter understands Go source and does proper syntax highlighting.
https://pinetools.com/syntax-highlighter generates this:
The pinetools formatter also understands Go source and offers many highlighting styles.
All the online source code formatters do their job quite well, but they have a fundamental flaw. If the code changes, you need to visit the website again to update the formatting.
Some people embed a 'Github gist' (https://gist.github.com/) into their blog, like this:
While it looks good it is cumbersome to use because the code is not in the same place as the rest of the blog. Plus: code can be edited and the embedded snippet will be updated automatically. Minus: the embedded snippet is invisible when in Blogger edit mode.
Many coders integrate a syntax highlighting script into their Blogger theme template. Once that is done correctly, all you need to do is switch to the HTML view, and use
<link href='http://prismjs.com/themes/prism.css' rel='stylesheet'/>
<script src='http://prismjs.com/prism.js' type='text/javascript'/>
When you use the links to prism.js and prism.css on prismjs.com, you get the default version that only supports css, javascript and 'c-like' languages. For a version that supports other languages you have to download a specific version. I opted for additional go, python and opencl support. The prism.js and prism.css files have to be in a place where the browser can access them. Google drive is said to be such a place, but i couldn't get that to work. www.xs4all.nl/~notnot/ worked on the first try, as follows :
<link href='https://www.xs4all.nl/~notnot/prism.css' rel='stylesheet'/>
<script src='https://www.xs4all.nl/~notnot/prism.js' type='text/javascript'/>
// hello.go, jpad 2018
package main
import (
"fmt"
)
func main() {
fmt.Println("Hello, World!")
}
The pinetools formatter also understands Go source and offers many highlighting styles.
All the online source code formatters do their job quite well, but they have a fundamental flaw. If the code changes, you need to visit the website again to update the formatting.
Some people embed a 'Github gist' (https://gist.github.com/) into their blog, like this:
While it looks good it is cumbersome to use because the code is not in the same place as the rest of the blog. Plus: code can be edited and the embedded snippet will be updated automatically. Minus: the embedded snippet is invisible when in Blogger edit mode.
Many coders integrate a syntax highlighting script into their Blogger theme template. Once that is done correctly, all you need to do is switch to the HTML view, and use
<pre><code class="language-whatever">...</code></pre>tags around your code snippet. Let's modify my own Blogger template in this way. PrismJS is a modern lightweight syntax highlighter written in javascript. Follow the instructions at https://prismjs.com/ to integrate it. Easy: open the theme html, and add the following two lines between <head> and </head> :
<link href='http://prismjs.com/themes/prism.css' rel='stylesheet'/>
<script src='http://prismjs.com/prism.js' type='text/javascript'/>
// hello.go, jpad 2018
package main
import (
"fmt"
)
func main() {
fmt.Println("Hello, World!")
}
When you use the links to prism.js and prism.css on prismjs.com, you get the default version that only supports css, javascript and 'c-like' languages. For a version that supports other languages you have to download a specific version. I opted for additional go, python and opencl support. The prism.js and prism.css files have to be in a place where the browser can access them. Google drive is said to be such a place, but i couldn't get that to work. www.xs4all.nl/~notnot/ worked on the first try, as follows :
<link href='https://www.xs4all.nl/~notnot/prism.css' rel='stylesheet'/>
<script src='https://www.xs4all.nl/~notnot/prism.js' type='text/javascript'/>
Geen opmerkingen:
Een reactie posten