Code Highlighting and Formatting Cheetsheet in Jekyll

#html   #markdown   #jekyll

Creating a blog demands using some amount of graphical motives. In this place formatting and graphical motives are aggregated, useful in creating visual aspect of a Jekyll website. To explore motives presented below go to github repository. to “_posts” catalog, and open this post to look at code behind that.

Contents:
1. Code highlighting,
2. Text formatting.

1. Code highlighting

Code highlighting in markdown

<a class="sidebar-nav-item" href="/blog"></a>

Code highlighting in markdown - python code snippet

class Singleton:
    def __new__(self):
        print("la")
        # check whether obcject (self) has attribute "instance"
        
        # if hasattr function is evaluated as FALSE (object self not have instance)
        if not hasattr(self, 'instance'):
            
            # new instance is created
            self.instance = super().__new__(self)
            # __new__ is a method which create new instance of class
            # super is a reference to parent class
            
        # if hasattr function is evaluated as TRUE, just return existing instance
        # (so no new instance will be created )
        return self.instance
        # so this line making that we will get the same object even if we want
        # to create next object
    
    def method_01(self):
        print("lala")

Code highlighting in markdown with raw clause

<a class="sidebar-nav-item{% if page.url == node.url %} 
active{% endif %}" href="{{site.baseurl}}{{ node.url }}">{{ node.title }}</a>

Code highlighting in markdown showing markdown code

``` html
<a class="sidebar-nav-item{% if page.url == node.url %} 
active{% endif %}" href="{{site.baseurl}}{{ node.url }}">{{ node.title }}</a>
```

Code highlighting in markdown - when language not recognized

print("Something")

Deprecation: You appear to have pagination turned on, but you haven't included the `jekyll-paginate` gem. Ensure you have `plugins: [jekyll-paginate]` in your configuration file.  

Rogue code highlighting in rectangle sharp frame

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Rogue code highlighting with code numeration

1
2
3
def foo
  puts 'foo'
end

Some command line or small code snippets

Code

or

More code

Html code block

  
    puts "hello"
  

Embedding gist code

2. Text formatting

Div container - annotations

Border around text

First example with text surrounded by a colored border.
This example also has multiple lines.

Border around text with regulated width

First example with text surrounded by a colored border.
This example also has multiple lines.

Border around text with regulated width 2

First example with text surrounded by a colored border.
This example also has multiple lines.

Border around text with regulated width and text wrapped

First example with text surrounded by a colored border.
This example also has multiple lines.

Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text. Wrapped text.

Text area

Text area 2

Inline font change

Dependency Error: Yikes! It looks like you don’t have jekyll-paginate or one of its dependencies installed.

Inline font change 2

Roses are red.

Markdown colored text

Some Markdown text with some blue text.

Markdown colored text in div container

Tekst with line on the left

Tekst with line
on the left

Bullet points

• One point
• second point

Special characters writing in html

{
%
}
 
`

Text bolding

bolded text

or

bolded text also

Italicization

italicized text

Italicization + align attribute

Source: NASA

Abbreviations

HTML

Citation

— Werner Heisenberg

Deletion

Deleted something

Insertion

inserted

Superscription

Something^text

Subscription

Something_text

Align attribute - text to left

This is some text in a paragraph.

Align attribute - text to center

This is some text in a paragraph.

Align attribute - text to right

This is some text in a paragraph.

Linebreak with specified size

Bulletpoints

• First bullet
• second
• third

Numeration

1. First number
2. second
3. third

External link type 1

link somewhere

External link type 2 (with opening in a new window)

link somewhere

Table

Table 2

Latex equations (mathjax)

Depending on the value of \(x\) the equation \(f(x) = \sum_{i=0}^{n} \frac{a_i}{1+x}\) may diverge or converge.

Source: overleaf.com

Photo uploading

Source: unsplash.com

Embedding Plotly chart-studio plot in iframe with plot centering

Embedding Shiny app plot in iframe with plot centering

Annotation