New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make independent renderer #177
Comments
@liron-navon you are right, it is not possible right now using |
@jfcere What do you mean? the service is a single instance, so I can only set one renderer at a time right? |
You would have to pass renderer options every time, might not be ideal but passing Would look something like the code below... from the top of my mind, it might need adjustments and it looks so boilerplate. Don't get me wrong this is something I'm going to improve but right now this is the only workaround I can think of with the code in place. example.component.html<markdown [innerHTML]="compiled"></markdown> example.component.tspublic compiled: string;
constructor(private markdownService: MarkdownService) { }
ngOnInit() {
// custom renderer
const myRenderer = new MarkedRenderer()
myRenderer.heading = (text: string, level: number) => {
const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
return '<h' + level + '>' +
'<a name="' + escapedText + '" class="anchor" href="#' + escapedText + '">' +
'<span class="header-link"></span>' +
'</a>' + text +
'</h' + level + '>';
};
// construct markedOptions using actual MarkdownService options + custom renderer
const markedOptions = {
...this.markdownService.options,
renderer: myRenderer,
};
// markdown to compile
const markdown = '### Markdown Title Example';
const decodeHtml = true;
// compile markdown using constructed markedOptions
this.compiled = this.markdownService.compile(markdown, decodeHtml, markedOptions);
} |
Hello, I tried using this method to create a separate renderer. For me the custom renderer works but when adding compiled back to <markdown [innerHTML]="compiled"> the root compiler still overrides what I changed. In this case I tried to remove the p tag but it still adds it back.
|
In my use case I wish to have the following:
But I wish each to render differently, therefore apply a different renderer, it's currently not possible, I would like to suggest the following API:
The text was updated successfully, but these errors were encountered: