pc035860 / angular-highlightjs Goto Github PK

The demo page is no longer working. The error in the console reads:

TypeError: Cannot read property 'configure' of undefined

Would love to have this on npm so I can npm install it. :-)

Hi

I'm using angular-highlightjs for my site and always specify language, for example, hljs-language="java".
However I often see incorrect language in the resulting HTML. Sometimes it's correct: [code class="hljs java"]. Sometimes [code class="hljs cs"] or [code class="hljs cpp"].
Please advise.

It seems that adding language attribute affects the compilation feature. I'm finding that the compile behaviour is a bit unpredictable - sometimes it works, sometimes not. But here is a plunkr based on the JSON pretty print example modified to show this issue.

http://plnkr.co/edit/2toXC6bCDpYNR8JPSTgD?p=preview

Notice that the expression {{editObject}} inside the last div is not being compiled. If you remove the language attribute it is compiled correctly.

Any suggested fix/workaround? It's not obvious looking at the code why this is happening.

Thanks!

The old ones - escape and no-escape are still working.

I am trying to use angular-highlightjs with requirejs. because of dependency on "highlight.js" (notice th .js suffix) require tries to load highlightjs from application base path. Following extract from requirejs api

RequireJS also assumes by default that all dependencies are scripts, so it does not expect to see a trailing ".js" suffix on module IDs. RequireJS will automatically add it when translating the module ID to a path. With the paths config, you can set up locations of a group of scripts. All of these capabilities allow you to use smaller strings for scripts as compared to traditional <script> tags.
There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for finding it. If a module ID has one of the following characteristics, the ID will not be passed through the "baseUrl + paths" configuration, and just be treated like a regular URL that is relative to the document:

1. Ends in ".js".
2. Starts with a "/".
3. Contains an URL protocol, like "http:" or "https:".

source: http://requirejs.org/docs/api.html

Also have a sample to play with.

https://jsfiddle.net/shg4wnfs/3/

Hello,

I have a problem with objectivec code and i can't figure it out why it doesn't work.

if i write this code: (taken from highlight.js website)

#import <UIKit/UIKit.h>
#import "Dependency.h"

and it's translated to:

    #import <uikit uikit.h="">
    #import "Dependency.h"
</uikit>

Did i miss something?

Thanks for the great work :)

Hi,

i'm got some issue trying to parse this :

"{{model_1 || 'MODEL_1'}}", "{{model_2 || 'MODEL_2' }}", "{{model_3 || 'MODEL_3' }}"

as soon as I trying to evaluate {{model_3 || 'MODEL_3'}} highlighting is broke.

It's seems to only bug after 3 expression in a row.

any ideas ?
thanks in advance.

Hi @pc035860 , I'm also trying to use highlightjs in my angularjs app. I've check your code. But seems that it doesn't accept an object as attribute.

So I'm wondering if I can add this:

.directive('obj', [function () {
  return {
    require: 'hljs',
    restrict: 'A',
    link: function(scope, iElm, iAttrs, ctrl) {
      var tmpStr = JSON.stringify(scope.obj, null, 4);
      ctrl.highlight(tmpStr);

      scope.$watch(scope.obj, function (newCode, oldCode) {
        var tmpStr = JSON.stringify(newCode, null, 4);
        if (newCode) {
          ctrl.highlight(tmpStr);
        }
        else {
          ctrl.clear();
        }
      });
    }
  };
}])

And then I can use it like this:

<div hljs obj='obj'></div>

It works fine but has the following issues:

1. If the object is very big, then it may cost a lot of memory of the browser(highest to 98 MB/sec on my machine);
2. Doesn't work the obj change. I want do live coding in my app, so I want it render whenever I have changes on my model.

I'm new to angularjs, hope you can help, thanks!!

Hi,

Thanks for the really useful library, great work.

I'd like to ask for a little guidance to proceed, help appreciated.

How can I use angular-highlightjs to "mark" a subset of the source code lines with yellow background?

This JSFiddle shows what I mean, which works with highlight.js:
http://jsfiddle.net/tovic/059x3ygs/2/

Thanks,
Mircea

I have br tags in my string, and I want them to be a real br and not show them in the code, how can I do this?

When I set the language as HTML, any "html", "head" and "body" tags are not showed when parsed. Any tips?
This pen is just an example of the problem http://codepen.io/anon/pen/WroLBM

Hello !
Sorry for taking some of your time. I'm stuck and can't figure out how succeed without your help...
Here's a preview of what I have working on plunker :
http://plnkr.co/edit/LxPoMzWitQ50KGvRQBez?p=preview

I've made several attempts to make angular-highlight display the code of the HTML generated and not the code of the template file. Unfortunately, I can't figure out how. Would you have an idea for me ? And could that be a feature included in angular-highlight ?

Thanks.

Xavier

If the source has an ampersand, this directive seems to be escaping the & to &, thus the the webpage is never able to render &. It's always rendered as &

<div data-hljs language="json">
    {
      "literal": "test&best",
      "escaped": "test&amp;best"
    }
</div>

Rendered as :

    {
      "literal": "test&best",
      "escaped": "test&best"
    }

Look here at the plunker: http://plnkr.co/edit/OPitPJor4gbGpxKsmrJN?p=preview

Add support for browserify before publishing to npm.

http://bower.io/

Go bower go!!

How can you display line numbers?

The <code> tag in the <pre><code></code></pre> template should have the hljs class in order for highlightjs themes to be able to set the background color (see the Solarized Dark theme, for example).

This is a pretty simple fix; just replace

      tElm.html('<pre><code></code></pre>');

with

      tElm.html('<pre><code class="hljs"></code></pre>');

The version property is missing from bower.json 😺

The ngmodules page, The Getting Started section, I think should contain:

npm install angular-highlightjs

I didn't read anywhere that this would install the directive, so I pretty much guessed and confirmed it was the same (it works). Just a suggestion for the ngmodules page which advertises this git repo and is the first google hit

Also, since this is such a short github issue I'm shamelessly going to plug my markdown editor/renderer that I made. this suggestion was for a change to a readme file anyway :P

Hello,

I have this code snippet inside the directive:

<div hljs hljs-language="cpp">
    std::vector<cv::Point> init_positions;
</div>

It is rendered as an HTML tag, so at the end of the code it appears a weird closing tag:

</cv::point>

I tried with < and > and they still show as < and >. Also when I put just a < character, it renders like <, even when there's no hljs-no-escape set at the directive.

It's funny because when working with HTML code I didn't have any problem.

This package is dependent on highlightjs but not in bower.json's "dependencies" field.

The first newline of an included template is ignored.

The following template:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Autocomplete tutorial</title>
    </head>
    <body>
    </body>
</html>

is rendered as

<!doctype html><html>
    <head>
        <meta charset="UTF-8">
        <title>Autocomplete tutorial</title>
    </head>
    <body>
    </body>
</html>

A workaround for this bug is to add a newline to the top of the included template.

Like tab width and all?

Using angular-highlightjs crashes without, so the package.json should list it as a dep.

please publish this to cdnjs so we can use this lib directly off a cdn instead of needing to use bower

#19, #21

I'm getting this error:

Error: hljsService.fixMarkup is not a function

Hi thanks for the awesome library, it is highly useful.

Currently I am facing an issue in rendering the code block.

In my case the code block that I want to render, is in separate file.
Also I want to make this configurable, this will be an input from JSON file. But when I use a scope variable as a paramater inside "include" it is not working.

<div hljs include="'file.html'">
  </div>
  <h5>not working</h5>
  <div hljs include="'{{fileName}}'">
</div>

check the plunker that I created for this.
http://plnkr.co/edit/4VoplzSggll1Qei6L2qO

It seems to me this directive should handle escaping html tags within the hljs directive tag.

Right now, if I wanted my hljs directive to yield:

<html>
  <body>
     <p> Hiya world</p>

I have to do the escaping myself, like so:

<html>
  <body>
    <p>Hiya world<p>

Ideally, I should be able to just do:

<hljs>
  <html>
    <body>
      <p>Hiya world</p>

The directive itself should handle the escaping.

Somehow the hljs directive adds empty parameters to attributes.

Let's say I have this directive declaration:

<div hljs>
    <div myDirective></div>
</div>

After applying your hljs directive, it becomes:

<div myDirective=""></div>

Can you help to fix this? Thanks.

<div class="col-lg-8" hljs language="java" source="s.content.taggedSource"></div>
For the above html code, my {{s.content.taggedSource}} contains <a href='#lntarget' class='nohighlight'>linkfrom</a>, I'd expect an html link to created, however I get the raw text.

I'm trying to bind a value in my $scope to the code that is included (I have a bunch of color selectors and I'm generating code for these colors). This works well only when the view is initialized. However, any other changes to the $scope.colors object does not change anything in the source code.

Any idea why this is happening?

Is it possible to render the output of an Angular expression? I'm trying to render an Angular object called blob, but when I put it inside a <div> with an attribute of hljs, it prints the curly-braced expression rather than the output of that expression.

This:

<div hljs>{{ blob }}</div>

Outputs this:

<div hljs>{{ blob }}</div>

When it should output this:

"name": {
  "first": "Krystal",
  "last": "Osborn"
}

Any idea on how to do this with angular-highlightjs?

Any help is appreciated. Thanks in advance!

I am using angular-highlightjs to highlight some code stored in a JSON.

<li ng-repeat="result in results">
    <h3 hljs source="'{{result.name}}'" compile="true"></h3>
    <ol>
        <li hljs source="'{{result.a1}}'" language="html"></li>
        <li hljs source="'{{result.a2}}'" language="js"></li>
    </ol>
</li>

It works fine for html code, but if I have javascript, I get an error saying I cannot have javascript code there.

Syntax Error: Token 'someCode' is an unexpected token at column xx of the expression

Am I missing something?

Hi, thanks for this directive. I'm trying to highlight some formatted HTML which looks like this:

<google-map center='{expression}' 
    zoom='{expression}'
    draggable='{string}'
    dragging='{expression}'
    refresh='{expression}'
    options='{expression}'
    events='{expression}'
    bounds='{expression}'></google-map>

I want to keep the newlines between attributes for readability purposes.

But the result I get is this:

<google-map center="{expression}" zoom="{expression}" draggable="{string}" dragging="{expression}" refresh="{expression}" options="{expression}" events="{expression}" bounds="{expression}"></google-map>

Is there a way to achieve what I want to do?

Thanks!

Not sure where it's coming from but it happened right after the 0.2.3 release.

Inspired(?) by PR #16

Should have output HTML like

<pre>
  <code class="hljs django">
    ...
  </code>
</pre>

I've tried doing such things as

div[hljs] {
overflow: auto;
word-wrap: none;
white-space: pre;
}

but I can't force hljs to not word-wrap the contents of the div (I want horizontal scrollbars like you have on the readme displayed in github) any ideas?

Thanks!

[See this discussion https://github.com/highlightjs/highlight.js/issues/1058]

How do I configure so that this:

<foo bar></foo>

...doesn't become this after it's ran through highlightjs:

<foo bar=""></foo>

Hey,

Maybe there's a way to get it to do this already, but it would be great if I could tell this to apply the highlight only to the nested code/pre tags.

For example, I have a section that pulls in a blog post dynamically:

<div ng-repeat="post in posts">
    <section hljs ng-include="post.href">
           <!-- Don't want everything in here to be treated as a code block and highlighted, just want to apply the directive to code blocks added in here -->
    </section>
</div>

Like source attribute in #19

This is a great directive, however, I have a couple of issues with dependencies:

1. First of all, the components/highlightjs repo is not the official highlight.js repository; in fact, there is no official bower package for highlight.js. Moreover, it is not being maintained, having lacked updates for 6 months.
2. Why do you add angular.js as a dependency? I think it is unnecessary - devs who'd consider or like to use this directive would already have angular listed as one of the first dependencies anyway. I don't see why we have to install it twice if we'd like to use your directive via bower. In a way, same goes for highlight.js.

Thanks for your work and appreciate you taking the time to read my comment.

Hi, we use Olark on our site in order to chat with users. Seems that Olark injects the following code:

<script language="javascript" id="...

Angular highlightjs is also looking for this language= directive, which causes a conflict:

 Exception  Error: [$compile:ctreq] http://errors.angularjs.org/1.2.27/$compile/ctreq?p0=hljs&p1=language

Controller 'hljs', required by directive 'language', can't be found!

Any thoughts on how to properly resolve this? Thanks!

Hi,
sorry to bother you.
Is there a way to use your nice module with
a html page ?

like:

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Simple app</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"</script>
    </head>
    <body>
        <input ng-model="name" type="text" placeholder="Your name">
        <h1>Hello {{ name }}</h1>
    </body>
</html>

now if I do

<div hljs>
<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Simple app</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"</script>
    </head>
    <body>
        <input ng-model="name" type="text" placeholder="Your name">
        <h1>Hello {{ name }}</h1>
    </body>
</html>
</div>

I get

<title>Simple app</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js" <="" script="">
    </head>
    <body>
        <input ng-model="name" type="text" placeholder="Your name">
        <h1>Hello {{ name }}</h1>
    </body>
</html>
</div></script>

:(

Apologies if this issue has been raised before, but I couldn't find it! The Highlight.js documentation (here) provides the below example for highlighting code that doesn't use <code> or <pre> tags:

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

How can we do this in angular-highlightjs?

Using the following line:

<div hljs="" source="'$project->set(\'parameter\', \'value\');'" language="php"></div>

I am expecting:

<code class="hljs php"><span class="hljs-variable">$project</span>-&gt;set(<span class="hljs-string">"parameter"</span>, <span class="hljs-string">"value"</span>);</code>

Instead, I am getting:

<code class="hljs bash php"><span class="hljs-variable">$project</span>-&gt;set(<span class="hljs-string">"parameter"</span>, <span class="hljs-string">"value"</span>);</code>

I think the bower.json does not reflect the modules dependency on angular. Should be easy to correct.

Can you please bump the bower version to 0.5?