Is it possible to ignore the first Line Break in a preformatted Div from a shortcode?

Question

I created a shortcode of [pncode] that lets me enclose some programming syntax and apply some styling. Notably, it preformats the text and makes it monospace (full CSS below, if it helps).

In the wordpress editor, I would like to be able to encase the syntax like so:

[pncode]
some sample code
some sample code
some sample code
[/pncode]

But this inserts a "return" right at the beginning. I can work around it by adding my code like this:

[pncode]some sample code
some sample code
some sample code
[/pncode]

But it doesn't look as neat.

Here is the picture of what either of the above samples look like:

My question: Is there a way to ignore the first line-break after the [pncode] so I can enter the first code above in the visual editor and it look like the 2nd displayed code in the image.

Not sure if you need all the information below, but I'll include it to be thorough:

Here is the CSS that gets applied to whatever is encased in [pncode]

.pncode {
    background: #ddd;
    font-family: consolas, courier, monospace;
    white-space: pre;
    box-shadow: 3px 3px 3px #999;
    border-style: solid;
    border-width: 1px;
    border-color: #333;
    text-align: left;
    padding: 5px;
    line-height: 90%
    width: 98%;
    overflow: auto;
}
.pncode br {
    display: none;
}

And it is encased by the CSS from this addition to my functions.php:

function pncode_shortcode_function( $atts , $content = null ) {
    return '<div class="pncode">' . $content . '</div>';
}
add_shortcode( 'pncode', 'pncode_shortcode_function' );

EDIT: To add more detail, the undesired sample output from the image I posted is not being created due to a <BR>. It is being created because of the hard return after [pncode], which sets the text encased by that shortcode to preformatted.

Wordpress adds a bunch of BR's all over the place in the visual editor, and that is why I have this part in my CSS:

.pncode br { display: none; }

It makes it so the BRs that wordpress adds are ignore.

BUT, the line break in particular that I am trying to get rid of is the one added due to an 'enter' in the a 'div' that is marked as preformatted text.

Again, I don't even know if it is possible. I just know I'm not an expert so I figured I'd ask in a forum where the experts can confirm that, or preferably find a creative solution.

Answer 1

You could try replacing the extra <br /> at the beginning of the shortcode content.

You could achieve that in many ways, but here's an example:

if( '<br />' === substr( ltrim( $content ), 0, 6 ) )
    $content = substr( ltrim( $content ), 6 );

return '<div class="pncode">' . $content . '</div>';

where we play with the substr() and ltrim() functions.

Update:

Thanks to @userabuser for his comment.

If we want to remove all variations of br tags, from the beginning of the shortcode string, we might try to construct this kind of reg-ex replacement:

$content = preg_replace( '#^\s*(<br\s*/?>\s*)+#i', '', $content );

Example:

The shortcode content:

   <br />    <br>
<BR> <bR> 
some sample code <br />
some sample code <br />
some sample code <br />

would display as:

some sample code <br />
some sample code <br />
some sample code <br />