1

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:

queston example

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.

  • FYI, I wasn't sure whether to post this here or at stackoverflow as a CSS/HTML question. If you think it should be there instead, just let me know. – Eddie Mar 9 '16 at 21:42
  • What do you mean ignore? Do you want to remove the BR from the final rendered output? If so, what is the problem with your css .pncode br { display: none; } ? If you want to target the first BR only, have you tried .pncode br:first-child { display: none; } ? – userabuser Mar 10 '16 at 10:42
  • @userabuser Mostly that I don't want the line break to be there. Whether that is accomplished by ignoring it, or removing it, or some other means, is all the same to me. I've updated the question with more detail. – Eddie Mar 10 '16 at 18:10
3

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 />
  • 1
    Good idea... But you might need to account for cases where <br /> is <br/> (5 chars) or <br> (4 chars) - albeit output from WordPress may be consistently one form of the BR tag. Perhaps even a preg_replace on the first instance of BR (any form of BR) after the opening .pnecode element might do the trick... – userabuser Mar 10 '16 at 10:47
  • 1
    thanks for the suggestion, it was a naive example here where I tried to avoid the preg_replace canon ;-) but I think you're right, that we should try to handle the various br tags in general @userabuser – birgire Mar 10 '16 at 11:10
  • 2
    lol... I sympathise, who want's to regex just for the hell of it? :) – userabuser Mar 10 '16 at 11:11
  • This would work great, if it was a BR tag I was trying to get rid of. I've already set the div to ignore all the BR tags. What is creating the 'return' is not a BR space but the fact that a 'return' exists in the block that is set as preformatted text. I edited the question to provide more detail. – Eddie Mar 10 '16 at 18:15
  • @Eddie so your image isn't showing the HTML output, but rather the raw text output where we would see all the HTML tags? You want to left-trim the shortcode content? What happens if you use the reg-ex replacement? – birgire Mar 10 '16 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.