Github Jekyll how to make real page format same as preview - jekyll

Question

My github jekyll structure looks like next:
after I enter _posts and create .md file, it looks like:
the corresponding code is:
Generics were introduced to the Java language to provide tighter type checks at compile time and to support generic programming.
The generics looks like:
```Java
List<String> list = new ArrayList<>();
//add item to list
String s = list.get(0);
```
or
```Java
public class Box<T> {
// T stands for "Type"
private T t;
//other code
}
```
The most commonly used type parameter names are:
```
E - Element (used extensively by the Java Collections Framework)
K - Key
```
We can see that the format is nice, such as it has syntax highlight.
I called it preview page
However, when I enter into my page by typing my github page url to see, it likes:
I called it real page
We can see that real page looks bad, e.g. there is no syntax highlight, there are multiple borders for quoting code syntax etc.
Thus, how to make the real page format is the same as preview page?

Answer 1

I suppose that you're relatively new to Jekyll so I have to do some clarification to you.
The result that you call "preview" is the result of your markdown parsed by GitHub. All markdowns have something in common so it's very likely that even if your parser is different almost all the things are parsed similarly. You could see a difference at the beginning of your "preview": the yaml content is displayed as a table.
Let's come back to Jekyll. If you're using the default settings, the parser of your code is kramdown (you could change it in the _config.yml file). When you execute Jekyll, it builds your website. That means that it parses your markdown and convert it to HTML. How it converts to HTML depends on a lot of things based on your configuration and plugin installed.
By default, you have no highlight. If you want to change it, take a look at the jekyll documentation. By default, it uses Rogue but you can also use Pigments or some other highlighter of your choice.
I don't think that this answer covers all your doubts and certainly not all your problems but it's to let you understand that your question, as it was posted, have not so much sense since your "preview page" and your "real page" are two completely distinct things. So google a bit, find what you want to achieve and ask a new question (you will surely have one in the near future).
Happy coding!