Prismjs 및 TinyMCE를 사용하여 AngularJS를 통해 코드 샘플을 강조 표시하는 방법

사용자가 코드를 mysql 데이터베이스에 삽입 할 수있는 각도 응용 프로그램에 tinyMCE 플러그인이 있습니다.Prismjs 및 TinyMCE를 사용하여 AngularJS를 통해 코드 샘플을 강조 표시하는 방법

내 데이터베이스에서 검색된 삽입 코드를 강조하고 싶습니다.

TinyMCE에서 사용하는 프리즘은 default이므로 프리즘을 사용했습니다. TinyMCE를 사용하여 직접 코드 샘플을 사용자 지정하고 강조 표시 할 수 있습니다. 그러나 한 번 데이터베이스에 삽입 표시를 검색, 코드 샘플 내가 prism.css 수입 있지만 강조 could't 내 index.html을뿐만 아니라 prism.js : 여기

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="prism.css" rel="stylesheet" /> 
     //... 
    </head> 
    //... 
    <body> 
     //... 
     <script src="angular_1_6.min.js"></script> 
     <script src="MyCtrl.js"></script> 
     <script src="prism.js"></script> 
    </body> 
</html>

이의 예입니다 내 데이터베이스에서 결과 문자열 :

<pre class="language-markup"><code>&lt;div class="alert alert-danger" id="question-error" role="alert" ng-if="showQuestionError"&gt; 
     &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="showQuestionError=false"&gt; 
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; 
     &lt;/button&gt; 
     &lt;strong&gt;Erreur ! Merci de v&eacute;rifier que le titre de la question : &lt;/strong&gt; 
     &lt;ul &gt; 
      &lt;li&gt;Se termnine par un point d'interrogation (?).&lt;/li&gt; 
      &lt;li&gt;Ne d&eacute;passe pas 150 caract&egrave;res.&lt;/li&gt; 
      &lt;li&gt;Et n'est pas vide.&lt;/li&gt; 
     &lt;/ul&gt; 
    &lt;/div&gt;</code></pre>

추신 :

<pre class="language-markup"></pre>

내가 무엇을 할 수 바랍니다 : SO 일반적으로 단지 위의 태그 div 태그에 의해 싸여있다, 그것을 구문 분석?

출처

2017-02-05 kabrice

DB에서받은 결과 문자열을 추가하십시오. – lin

완료, __dit를 참조하십시오 – kabrice

TinyMCE에 이스케이프되지 않은 문자열로 데이터를 삽입해야합니다. 너 그거 해봤 니? – lin

내용은 두 가지의 확인 필요 "일반"웹 페이지에로드 할 때 :

프리즘의 파일을 당신은 페이지와 마크 업을 검색 프리즘에게
페이지에로드 코드 샘플 인 내용

첫 번째 부분은 여기에 설명되어 있습니다 : 특정에

https://www.tinymce.com/docs/plugins/codesample/#usingprismjsonyourwebpage

당신이 페이지에 CSS와 JS 파일이 필요합니다 :

<link rel="stylesheet" type="text/css" href="prism.css"> 
<script src="prism.js"></script>

당신은에있는 경우 HTML로 강조 표시하기 전에 페이지를로드해야합니다. 코드를로드하는 경우 동적으로 수동으로 코드를 마크 업의 페이지를 검색 프리즘을 알 수 있습니다 :

http://prismjs.com/extending.html#api

Prism.highlightAll() 명령은 전체 페이지를 검색 프리즘을 말해 코드 샘플에 마법을 할 것입니다.

출처

2017-02-07 15:39:43

놀라운! 그것은 정말 훌륭하게 작동합니다. Thx – kabrice

Prismjs 및 TinyMCE를 사용하여 AngularJS를 통해 코드 샘플을 강조 표시하는 방법

답변

관련 문제