title: Include an HTML/CSS/JS file as code, not rendered
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>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);
          }
      }
  });
  </code></pre>
  
  <p>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.</p>