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

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

<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› в innerHTML angular 2


typescript angular highlight
person ulou    schedule 25.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

как я вижу, есть только один способ добиться этого - вручную добавить диапазон вокруг части кода в вашей базе данных, которую вы хотите выделить, а затем использовать [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>

person Atal Kishore    schedule 25.10.2016
comment
Возможно, я вас не понимаю, но я вырезаю исходный код из необработанного файла, например: raw.githubusercontent.com/Vedenin/useful-java-links/master/. У меня нет кода в базе данных. - person ulou; 26.10.2016
comment
если вы получаете данные из необработанного файла, как узнать, какую часть кода вы хотите выделить, является их любой конкретной функцией, которую вы хотите выделить, в этом случае вам нужно искать эту функцию в sourceCode, и вы должны добавить этот диапазон вокруг Это - person Atal Kishore; 26.10.2016
comment
Насколько я знаю, вы не можете вставить директиву HTML в переменную typescript/javascript, но я это проверю. - person ulou; 27.10.2016
comment
Как впрочем и я. Вы не можете вводить html, стиль, URL-адрес, URL-адрес ресурса в переменную из-за контекстов безопасности. angular.io/docs/ts/latest/guide/security. html#!#xss - person ulou; 31.10.2016