make the code snippet scrollable

[Brainor]

Checklist

• I have read and accepted the contributing guidelines.

What is the topic?

Sharing tips and tricks

Description

When writing a post that contains a huge chunk of code, sometimes it's kind of ugly to see the whole code.

And here is an approach that I use to make the code block scrollable.

1. copy the jekyll-theme-chirpy.scss file according to the instruction
2. add this codeblock to end of the file

   div.scroll > .highlight {
       overflow-y: auto;
       height: 400px;
   }

3. when writing the code block in the post, just add {: .scroll } at the end of the code block like this

   ```python
    # large chunk of code
   ```
   {: .scroll}

The rendered content looks like this

I don't think this is needed by most of the users, so instead of a PR I post the approach here in case anyone also needs it.

[Rootjhon]

Is a better idea?

1. Configure height value
2. When it exceeds the height and automatically becomes scrollable

[Brainor]

Good idea, and I can modify the jekyll-theme-chirpy.scss as below:

---
---

@import 'main';

/* append your custom style below */
$max-lines: 15; // max lines of code to be scrolled

.highlight {
    overflow-y: auto;
    max-height: $max-lines * 1em;
}

where 15 is the number of lines I can manully set.

---

When writing a post likes this:

```python
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
print('a')
```
not scrollable when lines are less than 15
```python
print('a')
print('a')
print('a')
```
first empty line of code causes misalignment
```python


print('a')
print('a')
print('a')
```

it produces

[ankit0183]

Awesome bro

[Brainor]

As of v7.1.1, remember to copy the new content from jekyll-theme-chirpy.scss to the local file. The location can be found by bundle show jekyll-theme-chirpy.