MyBB Community Forums

Full Version: How to increade the height of the code box?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I want to increase the height of the code box.

How am I suppose to do that? So as you see the bellow code box - in my forum, after 10 lines, the scroll comes up, isn't there a way to make it a bit bigger so atleast 20 lines fit before the scroll comes in to play.

Example code box


I know somewhere in templates it is hiding, but I cannot figure out where. If someone can point me out, it will be very much helpful! Thanks!

Edit: So I've come accross, Mybb templates > My Theme > Templates > Mycode > mycode_code

But there is no height or weight option to edit. I am still searching, anyone here to help?
It's not in template, but in the css. In the global css :

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

Change the max-height with your value
(2022-12-18, 06:36 PM)LuFo Wrote: [ -> ]It's not in template, but in the css. In the global css :

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

Change the max-height with your value

.codeblock code{overflow:auto;height:auto;max-height:1000px;display:block;font-size:14px}

I have changed the max height to 1000px but still nothing working. Stays the same.

Edit: I have taken your idea and created a custom.css file on the templates and added

.codeblock code{max-height:1200px}

and finally forced it on all Index. It finally worked! Thanks for the idea. I don't know why on the global.css it was not working.
I've just tested on my test board and it work fine, do you have modified the css in the ACP ? You can directly modified the global css of your theme in the ACP, its certainly just a problem of cache (of your board or your browser)
(2022-12-19, 09:49 AM)LuFo Wrote: [ -> ]I've just tested on my test board and it work fine, do you have modified the css in the ACP ? You can directly modified the global css of your theme in the ACP, its certainly just a problem of cache (of your board or your browser)

Yup, I found why it was not working. When I installed the plugin Spoiler it created a mycode.spoiler in different .css so I was unable to find it. Now, when I forced mycode.code on a custom.css and forced it on all index, it worked. Then I found that mycode.code was in spoiler.css already. Sorry for the confusion. But yes, forcing a new css also works, I found a new thing.  Big Grin

Thankyou for your help!

Also, can you help me with one more thing, the tabs in code for example :-

code123123 [tab space] code123123
I want it to be shown like this inside the code box
code123123       .       code123123 (ignore the . gave it to make an example of tab space)

But instead it shows as:-

code123123 code123123 (the tab space is cut off with only a single space) 

I saw a thread somewhere in the forums explaining how to fix it using mycodes but I cannot seem to find it right now. Any help will be appreciated!
Sorry but I don't know how to do this Blush
(2022-12-19, 10:33 PM)LuFo Wrote: [ -> ]Sorry but I don't know how to do this Blush

No problem, I was able to fix it.   Smile Smile



So to keep the tab space inside [ code ] tags I did the following,

Admin CP > Templates and Styles > mytheme
Add Stylesheet and name it :- tabspace.css
Attached to :- Globally and select Write my own content

.codeblock code {
     white-space: pre;
}


Finally save! It should keep the tab spaces. Hope this helps someone.

[Image: 67dada4cdca54bd9a77d537d7040e432.png]


Also fixed my issue with Code name, how to set [ code=customtitle ] , all I did was the following :-

Admin CP > Configuration > MyCode > Add new MyCode

Title it whatever you want :- my choice was "tabspace.css",


Regular Expression:-

\[code\=(.*?)\](?|\n(.*?)\n|\n(.*?)|(.*?)\n|(.*?))\[\/code\]


Replacement :- 

<div class="codeblock">
<div class="title">$1:</div>
<div class="body" dir="ltr"><code>$2</code></div>
</div>


Click on Enabled and select Yes then click Save. You're done!

It will look something like this :- when used [ code=MyCustomTitle ]

[Image: 46e72d0cfe471839c3b52d3fec586d50.png]

[Image: e2ec0b2a53783a2954f922dba9068ad2.png]


Hope the above tutorials help someone who has the same issue as me! Cheers!