How to use the he.encode function in he

const writeRow = (file) => {
            // render a row given a [name, stat] tuple
            const isDir = file[1].isDirectory && file[1].isDirectory();
            let href = `${parsed.pathname.replace(/\/$/, '')}/${encodeURIComponent(file[0])}`;

            // append trailing slash and query for dir entry
            if (isDir) {
              href += `/${he.encode((parsed.search) ? parsed.search : '')}`;
            }

            const displayName = he.encode(file[0]) + ((isDir) ? '/' : '');
            const ext = file[0].split('.').pop();
            const classForNonDir = supportedIcons[ext] ? ext : '_page';
            const iconClass = `icon-${isDir ? '_blank' : classForNonDir}`;

            // TODO: use stylessheets?
            html += `${'' +
              '<i class="icon '}${iconClass}"></i>`;
            if (!hidePermissions) {
              html += `<code>(${permsToString(file[1])})</code>`;
            }
            html +=
              `<code>${sizeToString(file[1], humanReadable, si)}</code>` +
              `<a href="${href}">${displayName}</a>` +

const yOffset = font.height * 0.3
			const ys = y - yOffset
			const xw = x + w
			const d = `M${x},${ys} L${xw},${ys} Z`
			const color = foregroundColor || baseForegroundColor
			content += decorators.path({d, color})
		}

		const attrStr = attrs.join(' ')

		// Do not output elements containing whitespace with no style
		if (value.replace(/ /g, '').length === 0 && attrStr.length === 0) {
			return
		}

		const entified = he.encode(value, {decimal: false})
		content += decorators.text({
			value: entified,
			x, y, fontStyle, attrStr
		})
	})

const encoded_parts = split_html.map((part) => {
            if (regex.test(part)) {
                return `<span class="highlight">${encode(part)}</span>`;
            }

            return encode(part);
        });
        return encoded_parts.join("");

var attrsOk = (o.allowedAttributes || {})[low] || [];
      attrsOk = attrsOk.concat((o.allowedAttributes || {})['*'] || []);
      var valid;
      var lkey = lowercase(key);
      if (lkey === 'class' && attrsOk.indexOf(lkey) === -1) {
        value = value.split(' ').filter(isValidClass).join(' ').trim();
        valid = value.length;
      } else {
        valid = attrsOk.indexOf(lkey) !== -1 && (attributes.uris[lkey] !== true || testUrl(value));
      }
      if (valid) {
        out(' ');
        out(key);
        if (typeof value === 'string') {
          out('="');
          out(he.encode(value));
          out('"');
        }
      }
      function isValidClass (className) {
        return classesOk && classesOk.indexOf(className) !== -1;
      }
    }
  }

const fileName = `${componentName}-${demoName}`;
  const basePath = `demo/src/app/components/${componentName}/demos/${demoName}/${fileName}`;

  const codeContent = fs.readFileSync(`${basePath}.ts`).toString();
  const markupContent = fs.readFileSync(`${basePath}.html`).toString();
  const demoTplPath = `${fileName}.html`;


  return `


  <form action="${plnkrUrl}" method="post" id="mainForm">
    <input value="Example usage of the ${componentName} widget from https://ng-bootstrap.github.io" name="description" type="hidden">
${generateTags(['Angular', 'Bootstrap', 'ng-bootstrap', capitalize(componentName)])}
    <input value="${he.encode(generateIndexHtml())}" name="files[index.html]" type="hidden">
    <input value="${he.encode(generateDemosCSS())}" name="files[styles.css]" type="hidden">
    <input value="${he.encode(generateConfigJs())}" name="files[config.js]" type="hidden">
    <input value="${he.encode(contentMainTs)}" name="files[src/main.ts]" type="hidden">
    <input value="${he.encode(generateAppTsContent(componentName, demoName, `${basePath}.ts`))}" name="files[src/app.ts]" type="hidden">
    <input value="${he.encode(codeContent.replace(`./${demoTplPath}`, `src/${demoTplPath}`))}" name="files[src/${fileName}.ts]" type="hidden">
    <input value="${he.encode(markupContent)}" name="files[src/${fileName}.html]" type="hidden">
  </form>
  

`;
}

const ff = (val: ?string): ?string => {
      if (this.urlsAsHyperlinks &&
          val &&
          isValidURL(val)) {
        const ret =
`<a href="${val}">${val}</a>`
        return ret
      }
      return val ? he.encode(val) : val
    }
    return ff

const entriesHtml = entries.map((entry, entryIndex) => {
        return `
            <div class="ag-search-entry">
                <div class="media right">
                    <div class="media-content">
                        <a href="#" class="search-subject-link">${htmlEncode(entry)}</a>
                        <div data-entry-index="${entryIndex}" class="search-subject">${htmlEncode(entry)}</div>
                    </div>
                </div>
            </div>
        `;
    }).join('');

function ResultsSection (stepName) {
    return `
      <h2>${e(stepName)}</h2>
      <ul>
        ${results[stepName].map(Result).join('\n')}
      </ul>
    `
  }

function Upload (upload) {
    return `<li>${e(upload.name)}</li>`
  }
}

import React from 'react';
import { IconButton } from '../../../../components/elements';
import { DocBlock } from '../../../docblock';

import classNames from 'classnames';
import he from 'he';

let JSXExample = he.encode(`


`);

export class IconDoc extends React.Component {
    render() {
        return (
            

                
                
            
        );