web-dev-qa-db-fra.com

Est-il possible d'ignorer le premier saut de ligne dans une division préformatée à partir d'un shortcode?

J'ai créé un shortcode de [pncode] qui me permet de définir une syntaxe de programmation et d'appliquer un certain style. Notamment, il préformate le texte et le rend monospace (CSS complet ci-dessous, si cela peut aider).

Dans l'éditeur wordpress, j'aimerais pouvoir envelopper la syntaxe de la manière suivante:

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

Mais cela insère un "retour" dès le début. Je peux y remédier en ajoutant mon code comme ceci:

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

Mais ça n'a pas l'air aussi chouette.

Voici l'image de ce à quoi ressemble l'un ou l'autre des exemples ci-dessus:

queston example

Ma question: Y a-t-il un moyen d'ignorer le premier saut de ligne après le [pncode] pour que je puisse entrer le premier code ci-dessus dans l'éditeur visuel et qu'il ressemble au deuxième code affiché dans l'image.

Vous n'êtes pas sûr d'avoir besoin de toutes les informations ci-dessous, mais je l'inclurai pour être approfondi:

Voici le CSS qui est appliqué à tout ce qui est encapsulé dans [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;
}

Et il est encapsulé par le CSS de cette addition à mon functions.php:

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

EDIT: Pour ajouter davantage de détails, l'exemple de sortie non souhaité de l'image que j'ai publiée n'est pas en cours de création à cause d'un <BR>. Il est en cours de création en raison du renvoi après [pncode], qui définit le texte encapsulé par ce code court sur préformaté.

Wordpress ajoute un nombre important de BR dans l'éditeur visuel, et c'est pourquoi j'ai cette partie dans mon CSS:

.pncode br { display: none; }

Cela rend les BRs que Wordpress ajoute sont ignorés.

MAIS, le saut de ligne en particulier que je cherche à supprimer est celui ajouté en raison d’une entrée dans le div qui est marqué en tant que texte préformaté.

Encore une fois, je ne sais même pas si c'est possible. Je sais juste que je ne suis pas un expert, alors je me suis dit que je poserais la question sur un forum où les experts pourraient le confirmer ou, de préférence, trouver une solution créative.

shortcodecssvisual-editor
1
Eddie

Vous pouvez essayer de remplacer le <br /> supplémentaire au début du contenu du shortcode.

Vous pouvez y parvenir de plusieurs manières, mais voici un exemple:

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

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

où nous jouons avec les fonctions substr() et ltrim() .

Mettre à jour:

Merci à @userabuser pour son commentaire.

Si nous voulons supprimer toutes les variantes des balises br, à partir du début de la chaîne de shortcode, nous pourrions essayer de construire ce type de remplacement reg-ex:

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

Exemple:

Le contenu du shortcode:

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

afficherait comme:

some sample code <br />
some sample code <br />
some sample code <br />
3
birgire