CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Bice
Bice

Reputation: 149

Include an HTML/CSS/JS file as code, not rendered

I have a page that I am using ng-include to pull in a file as rendered HTML. I would like to include that same file as code, next to it.

Is there a way to do this in Angular, or jQuery? I want to be able to include HTML, CSS and potentially JS files as code that would be run through a code-renderer, like Prism or something similar.

This is similar to jsfiddle or codepen, in that you can see the code and rendered view in the same window, but I do not need them to be connected (ie. edit the code to see the rendered result.) I just want to pull both views from the same file.

I am currently using an Angular directive to loop through a JSON file and push out blocks of HTML according to what is listed in the JSON. My directive is:

app.directive('patterns', function() {
    return {
        restrict: 'E',
        require: ['^ngType', 'ngTemplate'],
        scope: {
            ngType: '@',
            ngTemplate: '@'
        },
        templateUrl: 'patterns.html',
        controller: function($scope, $http, $sanitize) {
            var theType = $scope.ngType;
            $http.get('indexes/json/' + theType + '.json')
                .then(function(result) {
                    $scope.patterns = result.data;
                });

        },
        controllerAs: 'patterns',
        link: function(scope, iElement, iAttrs, ctrl) {
            scope.getType(iAttrs.ngType);
        }
    }
});

And I want to add something that also uses pattern.anchor (based off an "anchor" key I have in my JSON) to grab a particular file and output only the code. I can currently use pattern.anchor with ng-include to output rendered HTML, but not only code.

Upvotes: 0

Views: 131

Answers (2)

Woodrow Barlow
Woodrow Barlow

Reputation: 9087

Ampersand-Delineated Character Entity

In the code, replace all angle brackets < and > with a character entity code &lt; and &gt;. The entity codes get rendered as angle brackets but don't get processed as such. Unfortunately, this doesn't preserve the formatting of your file (read on to see how to do that), since all whitespace gets compressed to a single non-breaking space.

&lt;strong&gt; The strong tag is shown rather
than rendered, but all whitespace characters
still get       compressed into a single space.
However, this <br /> break tag gets rendered rather
than shown. &lt;/strong&gt;

HTML provides a block-level element called pre. Anything inside the pre tag is considered pre-rendered and the browser displays it as-is. Whitespace in this block does not get condensed. This will preserve the formatting of your code.

<pre>
  &lt;strong&gt; In this block, if I add     extra spaces, they are shown.
    If I move to a newline, that is shown as well.
  HTML tags still need to have<br />their angle brackets replaced
in order to be shown rather than rendered.&lt;/strong&gt;
</pre>

If you are using JavaScript/AJAX to include the file, you can first do a string replace function to replace the angle brackets with the character entity codes. If you are doing server-side includes, you can do something similar with your server-side language of choice.

If you want to do all of this automatically, Mike Feltman suggested a method using Angular.

Upvotes: 1

Mike Feltman
Mike Feltman

Reputation: 5176

Yes, with angular you can use ngSanitize or the $sanitize service.

There's a simple example available here: http://codepen.io/tipsoftheday/pen/jthks

angular.module('expressionsEscaping', ['ngSanitize'])
  .controller('ExpressionsEscapingCtrl', function ($scope, $sanitize) {
      $scope.msg = 'Hello, <b>World</b>!';
      $scope.safeMsg = $sanitize($scope.msg);
});

and a more complex example available in the Angular documentation here: https://docs.angularjs.org/api/ngSanitize/service/$sanitize.

Upvotes: 2

Related Questions