Skip to content
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

Some highlighters require class on a wrapping element to render properly #418

Closed
wants to merge 3 commits into from

Conversation

@meeDamian
Copy link

@meeDamian meeDamian commented May 12, 2014

This is one of the possible solutions. Any thoughts?

Review on Reviewable

@lifeisfoo
Copy link

@lifeisfoo lifeisfoo commented Jun 13, 2014

👍

@lifeisfoo
Copy link

@lifeisfoo lifeisfoo commented Jun 14, 2014

I hope this will be merged soon.
E.g. without it isn't possible to add line numbers with prism http://prismjs.com/plugins/line-numbers/

@meeDamian
Copy link
Author

@meeDamian meeDamian commented Jun 14, 2014

@lifeisfoo Until then you can temporarily add this dependency to your package.json instead:

{
  "dependencies": {
    "marked": "chester1000/marked",

    "...": "..."
  }
}

remember to npm install afterwards.

@hemp
Copy link

@hemp hemp commented Jul 18, 2014

👍 This helped me make sure the styles are correct when using marked and highlightjs.

@aymericbeaumet
Copy link

@aymericbeaumet aymericbeaumet commented Jul 20, 2014

Thanks for the feature 👍 This is exactly what I needed.

Though I think it would be nice to also support an array of string method in order to permit several classes definition.

@meeDamian
Copy link
Author

@meeDamian meeDamian commented Jul 20, 2014

Since simply passing classesArray.join(' ') would work great, I'm not sure if additional check in a library is necessary here.

If more people will be pro-Array, though, I can edit my PR to include it.

@aymericbeaumet
Copy link

@aymericbeaumet aymericbeaumet commented Jul 20, 2014

It could indeed be done as you said, my proposal was just for convenience.

hyponymous added a commit to hyponymous/marked that referenced this pull request Sep 1, 2014
hyponymous added a commit to hyponymous/marked that referenced this pull request Sep 1, 2014
@chikathreesix
Copy link

@chikathreesix chikathreesix commented Sep 30, 2014

This is what I needed!
But I could actually do this with following code just as a workaround.
I know this is not a nice way, so I hope this pull request will be merged soon!

var marked = require('marked');
var hljs = require('highlight.js');
var renderer = new marked.Renderer();

renderer.code = function(code, language){
  return '<pre><code class="hljs ' + language + '">' + 
    hljs.highlight(language, code).value +
    '</code></pre>';
};

console.log(marked(codeStr, { renderer: renderer }));
@aymericbeaumet
Copy link

@aymericbeaumet aymericbeaumet commented Sep 30, 2014

@chikathreesix I actually ended up with the same solution 👍 Far more flexible

@chikathreesix
Copy link

@chikathreesix chikathreesix commented Sep 30, 2014

Cool 👍

@nickcmaynard
Copy link

@nickcmaynard nickcmaynard commented Oct 14, 2014

+1

@blairmorris
Copy link

@blairmorris blairmorris commented Nov 12, 2014

+1 for sure.

@codeboyim
Copy link

@codeboyim codeboyim commented Dec 7, 2014

I set langPrefix:'hljs ' in marked.setOptions to work around

@meeDamian
Copy link
Author

@meeDamian meeDamian commented Jan 12, 2015

Updated my repo to the latest codebase. Still can't get why it can't be merged.

@xdumaine
Copy link

@xdumaine xdumaine commented Jun 16, 2015

Bump. @chjj?

@stoffeastrom
Copy link

@stoffeastrom stoffeastrom commented Jul 3, 2015

Please merge!

tiziano88 added a commit to tiziano88/elm-markdown that referenced this pull request Apr 25, 2016
Currently the class is not added by marked nor by highlight.js itself,
and the rendered code will lack attributes such as background colour and
others that are defined by highlight.js styles on that particular class.

This workaround is based on
markedjs/marked#418 (comment).
@Huxpro
Copy link

@Huxpro Huxpro commented May 4, 2016

Please merge!

slayerfat added a commit to slayerfat/slayerfat.com.ve that referenced this pull request May 7, 2016
@akuma
Copy link

@akuma akuma commented Jun 11, 2016

Please merge!

@tzi
Copy link

@tzi tzi commented Oct 19, 2016

Please :)

@sovanna
Copy link

@sovanna sovanna commented Oct 24, 2016

it could help a lot of people... instead, we use workaround ..

@wells
Copy link

@wells wells commented Jan 30, 2017

@chjj Please merge this.

@ee7klt
Copy link

@ee7klt ee7klt commented Feb 26, 2017

@chjj please merge ;)

@joshbruce joshbruce added this to Queue in PRs Dec 1, 2017
@joshbruce joshbruce added this to the 0.4.0 - No known defects milestone Dec 25, 2017
@joshbruce
Copy link
Member

@joshbruce joshbruce commented Dec 25, 2017

@joshbruce joshbruce added this to To Do in No known issues Jan 24, 2018
@joshbruce joshbruce removed this from the 0.4.0 - No known defects milestone Apr 4, 2018
@joshbruce
Copy link
Member

@joshbruce joshbruce commented Apr 5, 2018

Closing due to merge conflicts and not in line with recent changes to docs.

@joshbruce joshbruce closed this Apr 5, 2018
No known issues automation moved this from To Do to Done Apr 5, 2018
@styfle styfle moved this from Queue to Close in PRs Jul 11, 2018
@lyswhut
Copy link

@lyswhut lyswhut commented Dec 9, 2018

I set langPrefix:'hljs ' in marked.setOptions to work around

When the language is undefined, langPrefix does not work, such as:

```
console.log('hahaha')
```

Will be rendered as:

<pre><code><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hahaha'</span>)</code></pre>

The code block will be missing the 'hljs' class.
My solution is:

const marked = require('marked')
const hljs = require('highlight.js')
const renderer = new marked.Renderer()
const doRenderCode = (code, lang) => lang ? hljs.highlight(lang, code, true).value : hljs.highlightAuto(code).value
renderer.code = (code, lang) => `<pre><code class="hljs ${lang || ''}">${doRenderCode(code, lang)}</code></pre>`
const markedOptions = {
   Renderer
   // langPrefix: 'hljs ',
   // highlight: (code, lang) => lang ? hljs.highlight(lang, code, true).value : hljs.highlightAuto(code).value
}
console.log(marked(markdownStr, markedOptions))

Input markdown string:

```
console.log('hahaha')
```

```js
console.log('hahaha')
```

Will be rendered as:

<pre><code class="hljs "><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hahaha'</span>)</code></pre>
<pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hahaha'</span>)</code></pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
PRs
Close
Linked issues

Successfully merging this pull request may close these issues.

None yet