This is a plugin code that supposed to add badge/label Infront of post title but i don’t understand why it is showing the code tags in frontend

The issue you’re facing could be due to the location where you’re adding the badge in your code. The badge is appended to the post title, hence it might be appearing within the title element, which could be causing the code tags to appear.

Here an example code, based from your current code, where the badge is prepended to the post title. This way, it will appear in front of the post title instead of within it.

add_filter('the_title','tmpl_badge_tag',10,2); 

function tmpl_badge_tag($title,$post_id){ 
    global $post; 

    if(!is_admin()) { 
        $newbadge_title=get_post_meta($post_id,'newbadge_title',true); 
        $newbadge_title=($newbadge_title!="")? $newbadge_title : ''; 
        $newbadge_color=get_post_meta($post_id,'newbadge_color',true);
        $tmpl_display_badge="";

        if($newbadge_title!=''){        
            $tmpl_display_badge="<span class="badge-status" style="background:". $newbadge_color.'">'. $newbadge_title.'</span>&nbsp;';
        }

        // prepend the badge to the title
        return apply_filters('tmpl_title_badge', $tmpl_display_badge . $title);
    }
    else
        return $title;
}

$templ = new templaticBadges();

add_action('wp_head','tmpl_badge_wp_footer'); 

function tmpl_badge_wp_footer(){ 
    ?> 
    .badge-status { 
        display:inline; 
        font-size:11px; 
        color:#fff; 
        padding:3px 5px; 
        margin:5px; 
        position: relative; 
        top:-7px; 
        -webkit-border-radius: 3px; 
        -moz-border-radius: 3px; 
        border-radius: 3px;
    } 

    .widget .badge-status {
        top:-3px; 
        font-size:10px; 
    } 
    <?php
}