Questions tagged [prismjs]

PrismJS is a JavaScript based syntax highlighter. Please also include the tag for the JavaScript technology you are using, for example: [javascript], [reactjs], [node.js], etc. Please do NOT include the tag of the language you are trying to highlight.

PrismJS is an extensible JavaScript-based syntax highlighter.

The Documentation:

124 questions

votes

1 answer

How to re-render Prism.js on ngModel Change Angular 5

I'm building a CMS and I'm trying to re-render Prism.js when the body of the article changes to display the syntax highlignting in the preview. The template:

<div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/prismjs" class="post-tag grid--cell" title="show questions tagged 'prismjs'" rel="tag">prismjs</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card__deleted">
    <time class="s-user-card--time" datetime="asked Jan 20 '18 at 10:35">asked Jan 20 '18 at 10:35</time>
    <div class="s-avatar s-avatar__32 s-user-card--avatar">
    </div>
    <div class="s-user-card--info">user6030397</div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-48125989">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/48125989/html-code-is-not-rendering-just-being-displayed-as-plaintext" class="question-hyperlink">HTML code is not rendering, just being displayed as plaintext</a></h3>
        <div class="excerpt">I have some HTML, but for some reason it's showing up as plaintext and it's not rendering.
This is what it looks like:

The HTML for this is like so:
<div>
  <mat-card>
    <button mat-raised-button>Copy Code to Clipboard</button>
   …</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/angular-material2" class="post-tag grid--cell" title="show questions tagged 'angular-material2'" rel="tag">angular-material2</a> 
                
                <a href="../../questions/tagged/angular5" class="post-tag grid--cell" title="show questions tagged 'angular5'" rel="tag">angular5</a> 
                
                <a href="../../questions/tagged/prismjs" class="post-tag grid--cell" title="show questions tagged 'prismjs'" rel="tag">prismjs</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card__deleted">
    <time class="s-user-card--time" datetime="asked Jan 06 '18 at 09:29">asked Jan 06 '18 at 09:29</time>
    <div class="s-avatar s-avatar__32 s-user-card--avatar">
    </div>
    <div class="s-user-card--info">user7898461</div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-47908214">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/47908214/how-to-get-prismjs-to-highlight-code-block-in-angular-directive-without-having" class="question-hyperlink">How to get PrismJS to highlight code block in angular directive without having to implement a 1 second timeout delay?</a></h3>
        <div class="excerpt">I have created a simple application (angular 1.6) that allows a user to save there code and have it display with code highlighting leveraging prismjs. The only problem is, when I call Prism.highlightAll from within the directive, I have to utilize…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/prismjs" class="post-tag grid--cell" title="show questions tagged 'prismjs'" rel="tag">prismjs</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 20 '17 at 14:27">asked Dec 20 '17 at 14:27</time>
    <a href="../../users/9123121/dpalmer212" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/9123121.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Dpalmer212" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/9123121/dpalmer212" class="s-user-card--link">Dpalmer212</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1</li>
            
            
            
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-55827625">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>-1</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/55827625/how-to-fix-error-in-node-modules-types-prismjs-index-d-ts-error-cannot-find-na" class="question-hyperlink">How to fix ' ERROR in node_modules/@types/prismjs/index.d.ts error Cannot find name Required' error in angular</a></h3>
        <div class="excerpt">I install @types/prismjs but i have this problem 
in node_modules/@types/prismjs/index.d.ts(316,10): error TS2304: Cannot find name 'Required'.
Angular
config.ts
    { "compileOnSave": false, "compilerOptions":
 { "baseUrl": "./", "outDir":…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/tsconfig" class="post-tag grid--cell" title="show questions tagged 'tsconfig'" rel="tag">tsconfig</a> 
                
                <a href="../../questions/tagged/prismjs" class="post-tag grid--cell" title="show questions tagged 'prismjs'" rel="tag">prismjs</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Apr 24 '19 at 10:14">asked Apr 24 '19 at 10:14</time>
    <a href="../../users/11404570/koukou" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/11404570.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="koukou" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/11404570/koukou" class="s-user-card--link">koukou</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">23</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>