How to Use: Code snippets

1. Callout snippets

You have a few option how to specify/provide callout message

Callout as data variable

Example:

{{site.data.callout.callout_info}}
##### Example 

Just head over to the example [__repository__](https://github.com/codefreshdemo/example-springboot-kafka){:target="_blank"} in Github and follow the instructions there.
{{site.data.callout.end}}

Result:

Available styles:

• {{site.data.callout.callout_info}} - callout with info style
• {{site.data.callout.callout_success}} - callout with success style
• {{site.data.callout.callout_warning}} - callout with warning style
• {{site.data.callout.callout_danger}} - callout with danger style

Callout as > (blockquote)

Example:

> List of options:
1. Option 1
2. Option 2
3. Option 3
4. Option 4

Result:

• Default blockquote

  List of options:

  1. Option 1
  2. Option 2
  3. Option 3
  4. Option 4

Available styles for blockquote:

• {:.bd-callout-info}
• {:.bd-callout-success}
• {:.bd-callout-warning}

• {:.bd-callout-danger}

  Example

{:.bd-callout-success}
> Info blockquote:
1. Option 1
2. Option 2

Result:

Info blockquote:

1. Option 1
2. Option 2

2. Syntax highlighting

About syntax highlighting

For syntax highlighting, use fenced code blocks optionally followed by the language syntax you want:

```java
import java.util.Scanner;

public class ScannerAndKeyboard
{

	public static void main(String[] args)
	{	Scanner s = new Scanner(System.in);
		System.out.print( "Enter your name: "  );
		String name = s.nextLine();
		System.out.println( "Hello " + name + "!" );
	}
}
```

This looks as follows:

import java.util.Scanner;

public class ScannerAndKeyboard
{

	public static void main(String[] args)
	{	Scanner s = new Scanner(System.in);
		System.out.print( "Enter your name: "  );
		String name = s.nextLine();
		System.out.println( "Hello " + name + "!" );
	}
}

Fenced code blocks require a blank line before and after.

If you’re using an HTML file, you can also use the highlight command with Liquid markup.

{% highlight yaml %}
{% raw %}
step_name:
  title: Step Title
  description: Step description
  image: image/id
  working_directory: ${{step_id}}
  commands: 
    - bash-command1
    - bash-command2
{% endraw %}
{% endhighlight %}

Result:

step_name:
  title: Step Title
  description: Step description
  image: image/id
  working_directory: ${{step_id}}
  commands: 
    - bash-command1
    - bash-command2

The theme has syntax highlighting specified in the configuration file as follows:

highlighter: rouge

The syntax highlighting is done via the scss/_syntax.scss file.

Available lexers

The keywords you must add to specify the highlighting (in the previous example, ruby) are called “lexers.” You can search for “lexers.” Here are some common ones I use:

• js
• html
• yaml
• css
• json
• php
• java
• cpp
• dotnet
• xml
• http

3. Permalinks

Our documentation site supports jekyll docs collection which has default permalink set to /:collection/:path/

Default Permalink

collections:
  docs:
    output: true
    permalink: /:collection/:path/

See more in _config.yml

Change permalink

Add permalink: property into FrontMatter section of markdown file to set custom url for a page

Review following example folder structure

_site/
├── COLLECTION_NAME //in our case will be docs
│   └── super-page
│       └── test
│           └── hello-world.md

Check hello-world.md which is a child of the following folder structure:

/COLLECTION_NAME/super-page/test/

correspondingly the page url will be equal to

http://URL_OF_SITE/COLLECTION_NAME/super-page/test/hello-world/

Set permalink like given below to have custom file name in the url:

hello-world.md

---
title: "Hello World!" 
permalink: /:collection/super-page/test/slack-integration/
---

## Hello
This is hello world file

where:

• :collection - build-in variable in Jekyll
• slack-integration - new chunk of file name in url

so result will be http://URL_OF_SITE/COLLECTION_NAME/super-page/test/slack-integration/

Read more Jekyll Collections and Jekyll Permalinks