syntax highliting with scrollbars for long pieces of code

Question

 

Hi, I'm testing Q2A for my site and I'm already customized installation for my needs, but I have an issue in syntax highlighting long pieces of code (I absolutely need this for my site) that need scrollbars to scroll the whole code without to create a too long area in page

 

for syntax highliting I use:

 

Markdown Editor plugin

 

https://github.com/svivian/q2a-markdown-editor

 

but scrollbars (lke into stackoverflow posts) are not present and long lines go out of posting area . Do you know some workaround to have scrollbars when the code posted is larger anbd longer that a fixed value in chars?

Answer 1

Check the file ./qa-plugin/q2a-markdown-editor-master/pagedown/wmd.css for the .wmd-preview pre selector. You can decrease the value of max height to your desired requirements editing max-height:400px property. If this does not work:

1. Try to set the !important rule like this max-height:400px !important
2. Be sure that selector .wmd-preview pre is a block element (display:block)
3. Verify if exists the overflow:auto property

Comments

you are right, I'm sorry to not written before

this is the test url

http://puppylinuxanswers.dokupuppylinux.info/question/2/testing-queatr

---

In this case, just add "pre{max-height:300px}" into your default CSS theme file.

---

this works very well, I found that setting the *pre{max-height:300px}* works better than setting a fixed height, Now I have only study to find a way to have a select button for all code contained in textarea beetween scrollbars, but this is another matter. Great support!

---

In your case, you should not use fixed height. Also, increase the width of "pre" element (at least 600px).

Answer 2

This is may not the editor issue but the theme itself. Snow theme also having this bug and I will fix it soon. However if editor's inline css may override theme styelsheet and that also cause such issue.

you can add below to your stylesheet to cross check.

pre {

background: #f4f4f4;

padding: 0.1em 0.5em 0.3em 0.7em;

border-left: 11px solid #F95225;

margin: 1.7em 0 1.7em 0.3em;

overflow: auto;

width: 98%;

}

 

pre code {

background: #eee;

line-height: 1.6em;

font-size: 14px;

font-family: "Courier New", Courier, monospace, sans-serif;

text-align: left;

color: #555;

}

 

Change value as per your test.

 

See demo here http://demo.q2amarket.com/179/the-question-is-to-check-default-code-styling?show=179#q179

 

---

Oops! I think you are not talking about in content area but Markdown editor's preview area. Than you might update it's stylesheet in same way as above.

 

Comments

well! it seems to partially solve the issue: see:

http://puppylinuxanswers.dokupuppylinux.info/question/2/testing-queatr

setting the width to 20%, I get the horizontal scrollbar

http://www.freeimagehosting.net/n4p5e

do you think there is a way to have also a VERTICAL SCROLLBAR?

EDIT: I settled a fixed width

width: 300px;
height: 450px;

for width and height and now I have vertical and horizontal scrollbar

but any improvement you can suggest will be very well accepted!

many thanks to everyone for now