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.

[imvaibhav28]

I made above changes to jekyll-theme-chirpy. scss in my local dir /Users/vaibhav/.gem/ruby/3.4.1/gems/jekyll-theme-chirpy-7.3.1/assets/css
It works well in my local setup.

But when I try to copy the .scss file to my project as done in https://github.com/imvaibhav28/imvaibhav28.github.io/blob/main/assets/css/jekyll-theme-chirpy.scss

It doesn't work. What am I doing wrong here? Any help would be greatly appreciated.

[imvaibhav28]

Nevermind. Had to remove cache and reload for the changes to take place. Apologies.