Выделите часть DIV

Question

Я хотел бы higlight часть блока кода, который находится внутри раздела на моем сайте:

<section highlight-js-content=".highlight"> 
    <pre class="source-code-box"> 
    <code class="source-code java highlight">{{sourceCode}}</code> 
    </pre> 
</section> 

я получаю выход, как это (Исходник):

import aaaaa; 
import aaaab; 
import aaaac; 

    public class TestA { 
    private final Integer a; 

    TestA(final Integer a){ 
    this.a = a; 
    } 

    getA(){ 
    return this.a; 
    } 

    getTwoA(){ 
    return 2 * this.a; 
    } 
} 

давайте что Я хочу, чтобы весь метод getA() был выделен в разделе вывода.

Как я могу это сделать?

PS. Я хотел бы сделать это без jQuery.

РЕДАКТИРОВАТЬ:
решаемые:

Я нашел решение в следующей теме: Inject <input> in innerHTML angular 2

Answer 1

, как я могу видеть, есть только один способ достигнуть этого вручную путем добавления промежуток вокруг части кода в вашей базе данных, которую вы хотите выделить, а затем используйте [innerHTML]="sourceCode", чтобы скопировать код

<span class='higlightCode'> 
getTwoA(){ 
    return 2 * this.a; 
    } 
</span> 

Свяжите HTML, как

<section highlight-js-content=".highlight"> 
    <pre class="source-code-box"> 
    <code class="source-code java highlight" [innerHTML]="sourceCode"></code> 
    </pre> 
</section> 

выход будет что-то вроде этого

.highlightCode 
 
{ 
 
    background-color:#ffeb00 
 
}

<section highlight-js-content=".highlight"> 
 
    <pre class="source-code-box"> 
 
    <code class="source-code java highlight"> 
 
import aaaaa; 
 
import aaaab; 
 
import aaaac; 
 

 
    public class TestA { 
 
    private final Integer a; 
 

 
    TestA(final Integer a){ 
 
    this.a = a; 
 
    } 
 
<span class='highlightCode'> 
 
    getA(){ 
 
    return this.a; 
 
    } 
 
</span> 
 
    getTwoA(){ 
 
    return 2 * this.a; 
 
    } 
 
} 
 
    </code> 
 
    </pre> 
 
</section>