Beautify php, HTML, css or any in post code with shortcode

So, Here I am again. Was working on the theme for my blog. Oh! yea. I almost change this website whenever I get some time, apparently I don’t care much about the SEO. You know, being a programmer has its own consequences. We never settle and moreover, I have ADHD. Ha Ha…. OKAY. So, I was adding a new post about solving EWWW image optimizer plugin’s error which requires exec(), it has a lot of php codes, but it didn’t look good. So I created a shortcode which adds PrismJS. PrismJS has a very beautiful way to display codes and it uses JavaScript to beautify your codes and adds line numbers. Lets get going to the main course for this post.

I added PrismJS’s css and js to WordPress’s enquee stylesheet and enquee script hook.

function asf_es(){
wp_enqueue_style( 'asf_prism_css', get_stylesheet_directory_uri() . '/inc/css/prism.css' );
wp_enqueue_script( 'asf_prism_js', get_template_directory_uri () . '/inc/js/prism.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'asf_es', 15 );

This is just going to add PrismJS’s files to the theme. Now I am going to create the function that creates the shortcode and if you are a WordPress user you already know that, WordPress’s WYSIWYG editor changes html to special charector. So I have to process that too. Here it goes,

function code_display( $atts, $content = "" ) {
extract(shortcode_atts(array(
"lang" => "xxxx",
), $atts));
$content = preg_replace('#\<br./\>#s', '', $content); //replace line breaks added by tinymec of WordPress
$content = preg_replace('#\<p\>#s', '', $content); //replace paragraph ending tags added by tinymec of WordPress
$content = htmlspecialchars_decode($content); //converitng html special character to html
$output = '<pre class="line-numbers"><code class="language-'.$lang.'">'.htmlspecialchars($content).'</pre></code>'; //converitng html to html special character to display in frontend
return $output;
}
add_shortcode( 'code', 'code_display' );

I know you want the whole code in one chunk right? Here it is,


function asf_es(){
wp_enqueue_style( 'asf_prism_css', get_stylesheet_directory_uri() . '/inc/css/prism.css' );
wp_enqueue_script( 'asf_prism_js', get_template_directory_uri () . '/inc/js/prism.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'asf_es', 15 );
function code_display( $atts, $content = "" ) {
extract(shortcode_atts(array(
"lang" => "xxxx",
), $atts));
$content = preg_replace('#\<br./\>#s', '', $content); //replace line breaks added by tinymec of WordPress
$content = preg_replace('#\<p\>#s', '', $content); //replace paragraph ending tags added by tinymec of WordPress
$content = htmlspecialchars_decode($content); //converitng html special character to html
$output = '<pre class="line-numbers"><code class="language-'.$lang.'">'.htmlspecialchars($content).'</pre></code>'; //converitng html to html special character to display in frontend
return $output;
}
add_shortcode( 'code', 'code_display' );

Funny thing is, I am currently using this shortcode to display all the codes here. OH! and to display this shortcode you have to do it like the following,

[code lang="name of language"]<!-- your code here -->[/code]

This is it, you are done. I am done.

Leave a Reply