pages/_posts/2015-07-15-code.md
George ad9135fc7b
Added support for featured blog posts (#1498)
Implementing #1440. Still not sure if the year should be shown there or
not. Also, I limited to be displayed at least 2 at most 3 elements on
the row of featured blog posts, since when having only 1 featured post
the card would occupy the whole row (and it looks weird). What do you
think @alshedivat? Also, idk how to force the cards to have the same
height. I think it would look nicer, but my lack of web dev skills made
a difference here.

Some current screenshots:


![image](https://github.com/alshedivat/al-folio/assets/31376482/11b280dd-70b6-4bc4-84b6-987aa6412d55)


![image](https://github.com/alshedivat/al-folio/assets/31376482/d94aac41-246d-4b4e-afd0-161aab5a9b88)

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
Co-authored-by: Maruan <alshedivat@users.noreply.github.com>
2023-06-29 11:11:07 -03:00

2.6 KiB

layout title date description tags categories featured
post a post with code 2015-07-15 15:09:00 an example of a blog post with some code formatting code sample-posts true

This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting. It supports more than 100 languages. This example is in C++. All you have to do is wrap your code in markdown code tags:

```c++
code code code
```
int main(int argc, char const \*argv[])
{
    string myString;

    cout << "input a string: ";
    getline(cin, myString);
    int length = myString.length();

    char charArray = new char * [length];

    charArray = myString;
    for(int i = 0; i < length; ++i){
        cout << charArray[i] << " ";
    }

    return 0;
}

For displaying code in a list item, you have to be aware of the indentation, as stated in this Stackoverflow answer. You must indent your code by (3 * bullet_indent_level) spaces. This is because kramdown (the markdown engine used by Jekyll) indentation for the code block in lists is determined by the column number of the first non-space character after the list item marker. For example:

1. We can put fenced code blocks inside nested bullets, too.
   1. Like this:
      ```c
      printf("Hello, World!");
      ```

   2. The key is to indent your fenced block in the same line as the first character of the line.

Which displays:

  1. We can put fenced code blocks inside nested bullets, too.
    1. Like this:

      printf("Hello, World!");
      
    2. The key is to indent your fenced block in the same line as the first character of the line.

By default, it does not display line numbers. If you want to display line numbers for every code block, you can set kramdown.syntax_highlighter_opts.block.line_numbers to true in your _config.yml file.

If you want to display line numbers for a specific code block, all you have to do is wrap your code in a liquid tag:

{% raw %} {% highlight c++ linenos %}
code code code
{% endhighlight %} {% endraw %}

The keyword linenos triggers display of line numbers. Produces something like this:

{% highlight c++ linenos %}

int main(int argc, char const *argv[]) { string myString;

cout << "input a string: ";
getline(cin, myString);
int length = myString.length();

char charArray = new char * [length];

charArray = myString;
for(int i = 0; i < length; ++i){
    cout << charArray[i] << " ";
}

return 0;

}

{% endhighlight %}