Блог

Я возвращаю блок кода, содержащий HTML и JS, который используется в качестве шорткода для использования в шаблоне.

Мой вопрос: как мне изолировать блок кода в отдельный файл, но все равно вернуть его?

Таким образом, я могу легче поддерживать его и использовать преимущества цветовой подсветки синтаксиса и т. Д.

Я не уверен, что это лучшая практика.

 const outdent = require('outdent')({ newline: ' ' });
module.exports = (numValue) => {
    return outdent`
    <div>
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <div class="px-4 py-5 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
              Calculator
        </h3>
        <p class="mt-1 mb-6 max-w-2xl text-sm text-gray-500">
          Calculate the days
        </p>
        <label for="numberItem" class="sr-only">Number Item</label>
        <input type="number" name="numberItem" id="numberItem" value="${numValue}" oninput="converter(this.value)" onchange="converter(this.value)" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="1000000">
      </div>
      <div class="border-t border-gray-200">
        <dl>
          <div class="bg-gray-100 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">
              Standard Time
            </dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
              <span id="nr_hours">0</span> Hours
            </dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-gray-500">
            </dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
              <span id="nr_days">0</span> Days
            </dd>
          </div>
        </dl>
      </div>
    </div>
    
    </div>
    
    
    <script>
   
    function converter(numValue) {
    
      // Set up nodes for changing values
      var nr_hoursNode = document.getElementById('nr_hours');
      var nr_daysNode = document.getElementById('nr_days');

      var nr_hoursResult = numValue * 0.0000018;
      var nr_daysResult = nr_hoursResult * 475;
    
      // Display Values
      nr_hoursNode.innerHTML = nr_hoursResult.toFixed(5);
      nr_daysNode.innerHTML = nr_daysResult.toFixed(2); 
    }
    
    </script>`;
};