En la anterior entrada vimos cómo usar un ligero resaltador de sintaxis: prism.js. Ahora, vamos a ver cómo resaltar php.

El Javascript

Lo primero que tenemos que hacer será pegar este pedacito de código en el script descargado:

/*
 * PHP en prism.js: http://emiliocobos.net/php-en-prism-js/
 */
Prism.languages.php = {
	'comment': {
		pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
		lookbehind: true
	},
	'string': /("|')(.|\n|\r)*?\1/g,
	'regex': {
		pattern: /("|')(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))\1/g,
		lookbehind: true
	},
	'keyword': /\b(abstract|and|as|break|callable|case|catch|class|clone|const|continue|declare|default|do|echo|else(if)?|(end)?(declare|for(each)?|if|switch|while)|extends|final|function|global|goto|implements|(include|require)(_once)?|instanceof|insteadof|interface|namespace|new|or|print|private|protected|public|return|static|switch|throw|trait|try|use|var|while|xor)\b/g,
	// 'function': /\b(array|isset|defined?|die|eval|exit|list|filter_var|date|mail|print(f|_r)|var_dump|preg_(match(_all)?|replace|filter)|(url|json_)(encode|decode))\b/,
	'function': /\b(array|isset|defined?|die|eval|exit|list)\b/,
	'constant': /\b__(CLASS|DIR|FILE|FUNCTION|LINE|METHOD|NAMESPACE|TRAIT)__\b/g,
	'variable': /\$([a-zA-Z_])+\b/g,
	'boolean': /\b(true|false)\b/g,
	'number': /\b-?(0x)?\d*\.?\d+\b/g,
	'operator': /[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\//g,
	'ignore': /&(lt|gt|amp);/gi,
	'punctuation': /[{}[\];(),.:]/g
}

if (Prism.languages.markup) {
	Prism.languages.insertBefore('markup', 'prolog', {
		'php': {
			pattern: /(&lt;|<)\?php\b[\w\W]*?\?(>|&gt;)/ig,
			inside: {
				'prolog': {
					pattern: /(&lt;|<)\?php|\?(>|&gt;)/ig,
					inside: Prism.languages.markup.prolog.inside
				},
				rest: Prism.languages.php
			}
		}
	});
}

El CSS

Éste código añade algunas clases al código. Para resaltarlas correctamente podéis usar este CSS:

.token.function {
	color: #b9a01c;
}
.token.constant {
	color: #e00
}
.php .token.keyword,
.language-php .token.keyword {
	color: #a02;
}
.token.variable {
	color: #07a;
}

Forma de uso

Hay una consideración muy importante a tener en cuenta: Cuando estamos escribiendo PHP, estamos escribiendo markup, con PHP dentro. Es decir, no debemos usar la clase language-php, a no ser que sea simplemente PHP (que no esté entre <?php y ?>).

Ejemplos

Con PHP dentro: language-markup (de mi tema de wordPress)

<div class="post-body" itemprop="description">
	<?php 
		if (has_post_thumbnail()) : ?>
		<a href="<?php the_permalink() ?>"><?php 
			echo str_replace('<img', '<img itemprop="thumbnailUrl"',get_the_post_thumbnail($post->id, 'post-thumbnail', array(
				"alt" => get_the_title(),
				'class' => 'thumbnail alignleft'
			))); // The Thumbnail Size version
		?></a><?php
		endif;
	?>
	<?php the_excerpt() ?>
</div><!-- .post-body -->

Sólo php language-php: Código sacado de StackOverflow

class Bcrypt {
  private $rounds;
  public function __construct($rounds = 12) {
    if(CRYPT_BLOWFISH != 1) {
      throw new Exception("bcrypt not supported in this installation. See http://php.net/crypt");
    }

    $this->rounds = $rounds;
  }

  public function hash($input) {
    $hash = crypt($input, $this->getSalt());

    if(strlen($hash) > 13)
      return $hash;

    return false;
  }

  public function verify($input, $existingHash) {
    $hash = crypt($input, $existingHash);

    return $hash === $existingHash;
  }

  private function getSalt() {
    $salt = sprintf('$2a$%02d$', $this->rounds);

    $bytes = $this->getRandomBytes(16);

    $salt .= $this->encodeBytes($bytes);

    return $salt;
  }

  private $randomState;
  private function getRandomBytes($count) {
    $bytes = '';

    if(function_exists('openssl_random_pseudo_bytes') &&
        (strtoupper(substr(PHP_OS, 0, 3)) !== 'WIN')) { // OpenSSL slow on Win
      $bytes = openssl_random_pseudo_bytes($count);
    }

    if($bytes === '' && is_readable('/dev/urandom') &&
       ($hRand = @fopen('/dev/urandom', 'rb')) !== FALSE) {
      $bytes = fread($hRand, $count);
      fclose($hRand);
    }

    if(strlen($bytes) < $count) {
      $bytes = '';

      if($this->randomState === null) {
        $this->randomState = microtime();
        if(function_exists('getmypid')) {
          $this->randomState .= getmypid();
        }
      }

      for($i = 0; $i < $count; $i += 16) {
        $this->randomState = md5(microtime() . $this->randomState);

        if (PHP_VERSION >= '5') {
          $bytes .= md5($this->randomState, true);
        } else {
          $bytes .= pack('H*', md5($this->randomState));
        }
      }

      $bytes = substr($bytes, 0, $count);
    }

    return $bytes;
  }

  private function encodeBytes($input) {
    // The following is code from the PHP Password Hashing Framework
    $itoa64 = './ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    $output = '';
    $i = 0;
    do {
      $c1 = ord($input[$i++]);
      $output .= $itoa64[$c1 >> 2];
      $c1 = ($c1 & 0x03) << 4;
      if ($i >= 16) {
        $output .= $itoa64[$c1];
        break;
      }

      $c2 = ord($input[$i++]);
      $c1 |= $c2 >> 4;
      $output .= $itoa64[$c1];
      $c1 = ($c2 & 0x0f) << 2;

      $c2 = ord($input[$i++]);
      $c1 |= $c2 >> 6;
      $output .= $itoa64[$c1];
      $output .= $itoa64[$c2 & 0x3f];
    } while (1);

    return $output;
  }
}

4 pensamientos en “Resaltando código PHP en prism.js

    • Imagen de Emilio Cobos Álvarez el dijo:

      Haré algo sobre cómo mover todos los posts, y los comentarios anidados (que fue lo que más problemas me dió) próximamente.

      La verdad es que creé un pequeño script html + javascript + php para ello, y llevo queriendo compartirlo durante bastante tiempo ;)

      No agradezcas el comentario, que si lo hago es porque te lo mereces :)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.