The directive is an aid to displaying code as developers expect it to. You can put the e.g. Html code 'any-html-code' into the tag:
 <ea-mask-code ea-mask-html>
    any-html-code
 </ea-mask-code>
The attribut "ea-mask-[type]" in the tag can use different values.
  • html - for Html code
  • js - for JavaScript code
  • json - for JSON file
  • css - for CSS file
The attribute ea-mask-[type] is an additional directive that adds exactly one function 'rowChange(row)' to the current scope of directive 'eaMaskCode'. This function implements the necessary adjustments for the selected code type.
If you need other code conversions than the existing ones, this can be done by additional your own directives.
Look at the examples and create your own directive (e.g. emmaMaskPhp). In order to integrate this directive, the corresponding file must be integrated in the index.html <script src="app/directive/emmaMaskPhp.js" type="text/javascript"></script> and the directive must be declared in the app.js file. eaDir.directive('emmaMaskPhp', [emmaMaskPhp]).$inject = ['$scope']; Now you can add your directive as a new attribute in the tag <ea-mask-code emma-mask-php="emma-mask-php"> ...php code ... <\ea-mask-code>
The code to be displayed is to be embedded in the following Html tags. <ea-mask-code ea-mask-[type]> -- code of type = [type] to be displayed -- </ea-mask-code>
Note: If you want to display AngularJs directives as HTML code or other html elements inner javascript, it is imperative that you escape them. The internal Angular mechanism to implement this directive occurs before the masking takes place. That is why your code is modified before it can be prepared for display by the mask code.
The masking is done, for example, by replacing all '<' character of the tag with "&lt;". Angular can no longer recognize and manipulate this tag.
If there are display errors within the maskJs function, it is necessary to replace all characters '<' by "&lt;".
All div tags (opening and closing) should be escaped.
All Html syntax errors must be eliminated by masking.
In the right top corner is a copy button to put the code into the clipboard.

Subtitle

Sub-Sub-Title

Test text
 'use strict'; var eaMaskHtml = function () { return { restrict: 'A', // global scope, so will use the same $scope as the parent directive scope: false, controller: function($scope) { $scope.rowChange = function(htm) { const lt = String.fromCharCode(60); const gt = String.fromCharCode(62); const bl = " "; const nl = "\n"; const spa = ""; const spe = ""; let ret = htm.replaceAll(lt, '<'); ret = ret.replaceAll(gt, '>'); // change all ' to " const tag0 = /[']/g; ret = ret.replace(tag0, o => '"'); // attributes are red const tag2 = /[\s][\w-]+[=>]/g; //let test = ret.match(tag2); ret = ret.replace(tag2, o => "" + o + spe); // attribute values are green const tag3 = /"[\w:,;\-# //.()%]+"*/g; ret = ret.replace(tag3, o => "" + o + spe); // Tags are blue const tag1 = /<[\w-\\]+|>|<[/][\w-]+>/g; ret = spa + ret + spe; ret = ret.replace(tag1, o => spe + "" + o + spe + spa); return ret; }; } }; }; /* Default customization */ h1 { color: #21a828; font-size: xx-large; } h2 { color: #21a828; font-size: larger; } h3 { color: #21a828; font-size: large; } body { margin-bottom: 30px; /* Margin bottom by footer height */ } .footer { position: fixed; bottom: 0; width: 100%; z-index: 99; } /* Bootstrap customization */ .alert { border-radius: 15px; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); backdrop-filter: blur(5px); }