How to apply baseUrl with a custom renderer?

[james-moreno]

Hello,

I'm using marked with some custom rendering like so:

const baseUrl = 'fooUrl'
const renderer = {
  link(href, title, text) {
      return `<a href="${baseUrl}${href}">${text}</a>
    }
}
marked.use({renderer: renderer})

While the above works, I'd like to make use of the options to pass in a baseUrl to marked. The reason for this is I need it to apply to html that is parsed with marked, too.

I've attempted to do something like:

marked.setOptions({baseUrl: baseUrl})

It doesn't seem to have any effect, no matter if I put it before or after the marked.use.

Is this something that is possible, and if so how would I go about it?

[UziTech]

You can use this.options.baseUrl instead of baseUrl in your renderer function.

[james-moreno]

Forgive my ignorance but how would I add that to the renderer function?

If I'm creating the renderer like below, where would I put that this.options.baseUrl?

const renderer = {
  link(href, title, text) {
      return `<a href="${baseUrl}${href}">${text}</a>
    }
}

[UziTech]

const renderer = {
  link(href, title, text) {
      return `<a href="${this.options.baseUrl}${href}">${text}</a>
    }
}

[james-moreno]

Thank you for the response, however this appears to be just another way of doing the same thing. I'm wondering if it's possible to have the baseUrl apply for all of the renderer methods that I'm customizing.

My apologies if I didn't explain my issue correctly. The issue I am having is in particular with the html renderer and the standard link renderer getting a baseUrl.

I have something like this going on:

const baseUrl = 'fooUrl'
const renderer = {
  link(href, title, text) {
    return `<a href="${baseUrl}${href}">${text}</a>`
  }
 html(htmlString) {
    return htmlParser(htmlString)
  }
}
marked.use({renderer: renderer})

The above htmlParser function is shown below and is using DOMParser's parseFromString method to get the html. Then it adds styles to the different element types:

function htmlParser(htmlString) {
  var parser = new DOMParser();
  var htmlDoc = new parser.parseFromString(htmlString, 'text/html');

  htmlDoc.querySelectorAll('a').forEach(function (element) {
    element.classList.add('someStylingClass')
  })
}

The end goal of this was to add custom styling to all of the different elements coming from markdown and maintain the correct link url with a baseUrl. I can see a way to do it by not just editing the html query selector to change the style but also it's href, and there is the solution we discussed above, for the link renderer function. The question really is: is it possible to add a baseHref without having to do the aforementioned steps? Is it possible to set what the baseUrl is and have the parser or lexer (I don't fully understand how marked works, obviously) prepend that baseUrl to any hrefs?

[UziTech]

There is no way to edit the href of links entered as HTML (<a href=...) inside marked. Marked doesn't parse html blocks (per the spec) it just passes them to the renderer. The only way to do that would be to create a new renderer or tokenizer the way you are.

[james-moreno]

Thank you for all the replies and information. I was afraid this was the case but I appreciate the help!