327 lines
5.3 KiB
Markdown
327 lines
5.3 KiB
Markdown
---
|
|
title: "Syntax highlighting"
|
|
date: 2019-12-18T10:33:41+09:00
|
|
description: "Syntax highlighting test"
|
|
draft: false
|
|
hideToc: false
|
|
enableToc: true
|
|
enableTocContent: false
|
|
author: Jeus
|
|
authorEmoji: 🎅
|
|
pinned: true
|
|
tags:
|
|
- hugo
|
|
series:
|
|
-
|
|
categories:
|
|
- hugo
|
|
image: images/feature2/color-palette.png
|
|
---
|
|
|
|
## Code Syntax Highlighting
|
|
|
|
Verify the following code blocks render as code blocks and highlight properly.
|
|
|
|
More about tuning syntax highlighting is the [Hugo documentation](https://gohugo.io/content-management/syntax-highlighting/).
|
|
|
|
### Diff
|
|
|
|
``` diff {hl_lines=[4,"6-7"]}
|
|
*** /path/to/original ''timestamp''
|
|
--- /path/to/new ''timestamp''
|
|
***************
|
|
*** 1 ****
|
|
! This is a line.
|
|
--- 1 ---
|
|
! This is a replacement line.
|
|
It is important to spell
|
|
-removed line
|
|
+new line
|
|
```
|
|
|
|
```diff {hl_lines=[4,"6-7"], linenos=false}
|
|
*** /path/to/original ''timestamp''
|
|
--- /path/to/new ''timestamp''
|
|
***************
|
|
*** 1 ****
|
|
! This is a line.
|
|
--- 1 ---
|
|
! This is a replacement line.
|
|
It is important to spell
|
|
-removed line
|
|
+new line
|
|
```
|
|
|
|
### Makefile
|
|
|
|
``` makefile {linenos=false}
|
|
CC=gcc
|
|
CFLAGS=-I.
|
|
|
|
hellomake: hellomake.o hellofunc.o
|
|
$(CC) -o hellomake hellomake.o hellofunc.o -I.
|
|
```
|
|
|
|
``` makefile
|
|
CC=gcc
|
|
CFLAGS=-I.
|
|
|
|
hellomake: hellomake.o hellofunc.o
|
|
$(CC) -o hellomake hellomake.o hellofunc.o -I.
|
|
```
|
|
|
|
### JSON
|
|
|
|
``` json
|
|
{"employees":[
|
|
{"firstName":"John", "lastName":"Doe"},
|
|
]}
|
|
```
|
|
|
|
### Markdown
|
|
|
|
``` markdown
|
|
**bold**
|
|
*italics*
|
|
[link](www.example.com)
|
|
```
|
|
|
|
### JavaScript
|
|
|
|
``` javascript
|
|
document.write('Hello, world!');
|
|
```
|
|
|
|
### CSS
|
|
|
|
``` css
|
|
body {
|
|
background-color: red;
|
|
}
|
|
```
|
|
|
|
### Objective C
|
|
|
|
``` objectivec
|
|
#import <stdio.h>
|
|
|
|
int main (void)
|
|
{
|
|
printf ("Hello world!\n");
|
|
}
|
|
```
|
|
|
|
### Python
|
|
|
|
``` python
|
|
print "Hello, world!"
|
|
```
|
|
|
|
### XML
|
|
|
|
``` xml
|
|
<employees>
|
|
<employee>
|
|
<firstName>John</firstName> <lastName>Doe</lastName>
|
|
</employee>
|
|
</employees>
|
|
```
|
|
|
|
### Perl
|
|
|
|
``` perl
|
|
print "Hello, World!\n";
|
|
```
|
|
|
|
### Bash
|
|
|
|
``` bash
|
|
echo "Hello World"
|
|
```
|
|
|
|
### PHP
|
|
|
|
``` php
|
|
<?php echo '<p>Hello World</p>'; ?>
|
|
```
|
|
|
|
### CoffeeScript
|
|
|
|
``` coffeescript
|
|
console.log(“Hello world!”);
|
|
```
|
|
|
|
### C#
|
|
|
|
``` cs
|
|
using System;
|
|
class Program
|
|
{
|
|
public static void Main(string[] args)
|
|
{
|
|
Console.WriteLine("Hello, world!");
|
|
}
|
|
}
|
|
```
|
|
|
|
### C++
|
|
|
|
``` cpp
|
|
#include <iostream.h>
|
|
|
|
main()
|
|
{
|
|
cout << "Hello World!";
|
|
return 0;
|
|
}
|
|
```
|
|
|
|
### SQL
|
|
|
|
``` sql
|
|
SELECT column_name,column_name
|
|
FROM table_name;
|
|
```
|
|
|
|
### Go
|
|
|
|
``` go
|
|
package main
|
|
import "fmt"
|
|
func main() {
|
|
fmt.Println("Hello, 世界")
|
|
}
|
|
```
|
|
|
|
### Ruby
|
|
|
|
```ruby
|
|
puts "Hello, world!"
|
|
```
|
|
|
|
### Java
|
|
|
|
```java
|
|
import javax.swing.JFrame; //Importing class JFrame
|
|
import javax.swing.JLabel; //Importing class JLabel
|
|
public class HelloWorld {
|
|
public static void main(String[] args) {
|
|
JFrame frame = new JFrame(); //Creating frame
|
|
frame.setTitle("Hi!"); //Setting title frame
|
|
frame.add(new JLabel("Hello, world!"));//Adding text to frame
|
|
frame.pack(); //Setting size to smallest
|
|
frame.setLocationRelativeTo(null); //Centering frame
|
|
frame.setVisible(true); //Showing frame
|
|
}
|
|
}
|
|
```
|
|
|
|
### Latex Equation
|
|
|
|
```latex
|
|
\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x).
|
|
```
|
|
|
|
```javascript
|
|
import {x, y} as p from 'point';
|
|
const ANSWER = 42;
|
|
|
|
class Car extends Vehicle {
|
|
constructor(speed, cost) {
|
|
super(speed);
|
|
|
|
var c = Symbol('cost');
|
|
this[c] = cost;
|
|
|
|
this.intro = `This is a car runs at
|
|
${speed}.`;
|
|
}
|
|
}
|
|
|
|
for (let num of [1, 2, 3]) {
|
|
console.log(num + 0b111110111);
|
|
}
|
|
|
|
function $initHighlight(block, flags) {
|
|
try {
|
|
if (block.className.search(/\bno\-highlight\b/) != -1)
|
|
return processBlock(block.function, true, 0x0F) + ' class=""';
|
|
} catch (e) {
|
|
/* handle exception */
|
|
var e4x =
|
|
<div>Example
|
|
<p>1234</p></div>;
|
|
}
|
|
for (var i = 0 / 2; i < classes.length; i++) {
|
|
// "0 / 2" should not be parsed as regexp
|
|
if (checkCondition(classes[i]) === undefined)
|
|
return /\d+[\s/]/g;
|
|
}
|
|
console.log(Array.every(classes, Boolean));
|
|
}
|
|
|
|
export $initHighlight;
|
|
```
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hello world</title>
|
|
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="index.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
|
|
<script src="vendor/prism.js"></script>
|
|
<script src="examples.bundle.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
```css
|
|
/*********************************************************
|
|
* General
|
|
*/
|
|
pre[class*="language-"],
|
|
code {
|
|
color: #5c6e74;
|
|
font-size: 13px;
|
|
text-shadow: none;
|
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
direction: ltr;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
line-height: 1.5;
|
|
tab-size: 4;
|
|
hyphens: none;
|
|
}
|
|
pre[class*="language-"]::selection,
|
|
code::selection {
|
|
text-shadow: none;
|
|
background: #b3d4fc;
|
|
}
|
|
@media print {
|
|
pre[class*="language-"],
|
|
code {
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
pre[class*="language-"] {
|
|
padding: 1em;
|
|
margin: .5em 0;
|
|
overflow: auto;
|
|
background: #f8f5ec;
|
|
}
|
|
:not(pre) > code {
|
|
padding: .1em .3em;
|
|
border-radius: .3em;
|
|
color: #db4c69;
|
|
background: #f9f2f4;
|
|
}
|
|
```
|