Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140734

hljs in angular 8 using variables is empty

$
0
0

I am using hljs (imported in index.html), and 'ngx-highlight-js'. I want to create subcomponent that shows code snippet preview. Everything works good when I manually put in code like this:

<textarea highlight-js [options]="{}" [lang]="'typescript'">
  import os
  import sys

  if __name__ == "__main__":
     os.environ.setdefault("DJANGO_SETTINGS_MODULE", "wagtail_galery.settings.dev")
     from django.core.management import execute_from_command_line
     execute_from_command_line(sys.argv)
</textarea>

But, when I want to pass code using string variable, html element in browser is empty (code is propety of angular component).

<textarea highlight-js [options]="{}" [lang]="'typescript'">
  {{ code }} 
</textarea>

More code if you need (full can be found on this commit, but if you relate your answer to code that I didn't provided in question as text, please point that in your answer):

codeblock.component.html

<textarea highlight-js [options]="{}" [lang]="'typescript'">
  {{ code }}
</textarea>

codeblock.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-codeblock',
  templateUrl: './codeblock.component.html',
  styleUrls: ['./codeblock.component.sass']
})

export class CodeblockComponent{
  @Input() code:string;
}

home.component.ts

import { Component, OnInit } from '@angular/core';

/* Standard page elements imports */
import { HeaderComponent } from '../header/header.component';
import { TextComponent } from '../text/text.component';
import { CodeblockComponent } from '../text/text.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  constructor() { }

  Header:string = 'Welcome to MyDocs!';
  Text:string = 'This site is simple styled, piece of documentation for my own, open-source projects. Here you can read how my code works.';
  Code:string = 'Welcome to MyDocs!';

  ngOnInit() {

  }

}

home.component.html

<app-header [title]='Header'>
  </app-header>
  <app-text [text]='Text'>
  </app-text>
  <app-codeblock [code]='Code'>
  </app-codeblock>

</div>

Viewing all articles
Browse latest Browse all 140734

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>