如何为json文件中包含的内容添加字体颜色？

<link rel="stylesheet" type="text/css" href="styles.css">

.json-key {
  color: blue;
}

.json-value {
  color: green;
}

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    const jsonContainer = document.getElementById('json-container');
    jsonContainer.innerHTML = renderJson(data);
  });

function renderJson(data) {
  if (typeof data === 'object') {
    let result = '';
    if (Array.isArray(data)) {
      result += '[<br>';
      for (let i = 0; i < data.length; i++) {
        result += renderJson(data[i]);
        if (i < data.length - 1) {
          result += ',<br>';
        }
      }
      result += '<br>]';
    } else {
      result += '{<br>';
      for (let key in data) {
        result += `<span class="json-key">${key}:</span> ${renderJson(data[key])},<br>`;
      }
      result += '<br>}';
    }
    return result;
  } else {
    return `<span class="json-value">${data}</span>`;
  }
}

<div id="json-container"></div>