ㅠ누토님께서 말씀주신대로 텍스트 편집기를 찾아서 열었는데 HTML 만 아래처럼 뜨고 있습니다.. ㅠㅠ 

/* ============================================================
  [D-3] before-after — CSS 탭
  ▶ 사진 위 요소들은 pointer-events:none 으로 두어야 드래그 위치 계산이 정확합니다.
     이 규칙은 지우지 마세요.
  ============================================================ */

.nk-ba {
 {{!-- @name color-frame-bg @type color @default #F0EAE1FF @label "사진 없을 때 자리 색" --}}
 --nk-frame-bg: {{color-frame-bg}};

 {{!-- @name color-bar @type color @default #FFFFFFFF @label "가운데 세로선 색" --}}
 --nk-bar: {{color-bar}};

 {{!-- @name color-knob-bg @type color @default #FFFFFFFF @label "손잡이 동그라미 배경색" --}}
 --nk-knob-bg: {{color-knob-bg}};

 {{!-- @name color-knob-icon @type color @default #2B2723FF @label "손잡이 화살표 색" --}}
 --nk-knob-icon: {{color-knob-icon}};

 {{!-- @name color-tag-bg @type color @default #2B2723CC @label "BEFORE·AFTER 딱지 배경색" --}}
 --nk-tag-bg: {{color-tag-bg}};

 {{!-- @name color-tag-text @type color @default #FFFFFFFF @label "BEFORE·AFTER 딱지 글씨색" --}}
 --nk-tag-text: {{color-tag-text}};

 {{!-- @name color-caption @type color @default #6B6259FF @label "아래 안내 문구 색" --}}
 --nk-caption: {{color-caption}};

 {{!-- @name text-radius @type textfield @default "12" @label "사진 모서리 둥글기 (숫자만, 0이면 각짐)" @placeholder "12" --}}
 --nk-radius: {{text-radius}}px;

 {{!-- @name text-knob-size @type textfield @default "44" @label "손잡이 동그라미 크기 (숫자만, 예: 44)" @placeholder "44" --}}
 --nk-knob-size: {{text-knob-size}}px;

 box-sizing: border-box;
 font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
 font-style: normal;
}

.nk-ba * { box-sizing: border-box; }

.nk-ba__frame {
 position: relative;
 width: 100%;
 overflow: hidden;
 border-radius: var(--nk-radius);
 background: var(--nk-frame-bg);
 aspect-ratio: 4 / 3;
 touch-action: pan-y;
 cursor: ew-resize;
 user-select: none;
}

.nk-ba[data-ratio="1x1"] .nk-ba__frame { aspect-ratio: 1 / 1; }
.nk-ba[data-ratio="16x9"] .nk-ba__frame { aspect-ratio: 16 / 9; }
.nk-ba[data-ratio="3x4"] .nk-ba__frame { aspect-ratio: 3 / 4; }

.nk-ba__img {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 pointer-events: none;
}

/* 이후 사진은 오른쪽에 보입니다. 손잡이를 옮기면 자바스크립트가 잘리는 폭을 바꿉니다. */
.nk-ba__layer {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 clip-path: inset(0 0 0 50%);
 pointer-events: none;
}

.nk-ba__tag {
 position: absolute;
 top: 14px;
 padding: 6px 12px;
 border-radius: 999px;
 background: var(--nk-tag-bg);
 color: var(--nk-tag-text);
 font-size: 12px;
 font-weight: 700;
 line-height: 1.2;
 letter-spacing: 0;
 pointer-events: none;
}

.nk-ba__tag--before { left: 14px; }
.nk-ba__tag--after { right: 14px; }
.nk-ba__tag:empty { display: none; }

.nk-ba__handle {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 50%;
 width: 2px;
 margin-left: -1px;
 background: var(--nk-bar);
 pointer-events: none;
}

.nk-ba__handle:focus-visible { outline: 2px solid var(--nk-knob-icon); outline-offset: 2px; }

.nk-ba__knob {
 position: absolute;
 top: 50%;
 left: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 width: var(--nk-knob-size);
 height: var(--nk-knob-size);
 margin-top: calc(var(--nk-knob-size) / -2);
 margin-left: calc(var(--nk-knob-size) / -2);
 border-radius: 50%;
 background: var(--nk-knob-bg);
 color: var(--nk-knob-icon);
}

/* SVG 크기 고정 — 지우면 화살표가 거대해집니다 */
.nk-ba__knob svg { width: 20px; height: 20px; }

.nk-ba__caption {
 margin: 12px 0 0;
 color: var(--nk-caption);
 font-size: 13px;
 font-weight: 400;
 line-height: 1.6;
 letter-spacing: -0.01em;
 text-align: center;
}

@media (max-width: 768px) {
 .nk-ba__knob { width: min(var(--nk-knob-size), 38px); height: min(var(--nk-knob-size), 38px); }
 .nk-ba__tag { top: 10px; padding: 5px 10px; font-size: 11px; }
 .nk-ba__tag--before { left: 10px; }
 .nk-ba__tag--after { right: 10px; }
}

/* ── 위젯이 놓인 "칸"의 너비 기준 반응형 ──────────────────
  아임웹 편집화면의 모바일 보기는 브라우저 창이 아니라 위젯 칸만 좁아져서
  위의 @media 규칙이 발동하지 않습니다. 그래서 자바스크립트가 칸 너비를 재어
  data-w="mo"(좁음) / data-w="pc"(넓음) 를 붙여주고, 아래 규칙이 그때 적용됩니다.
  위 @media 규칙과 내용이 같습니다. 한쪽만 고치면 화면이 어긋나니 함께 고치세요. */
.nk-ba[data-w="mo"] .nk-ba__knob { width: min(var(--nk-knob-size), 38px); height: min(var(--nk-knob-size), 38px); }
.nk-ba[data-w="mo"] .nk-ba__tag { top: 10px; padding: 5px 10px; font-size: 11px; }
.nk-ba[data-w="mo"] .nk-ba__tag--before { left: 10px; }
.nk-ba[data-w="mo"] .nk-ba__tag--after { right: 10px; }
 

/* ============================================================
  [D-3] before-after — JavaScript 탭
  ▶ 하는 일: 사진 위를 마우스나 손가락으로 끌면 이후 사진이 보이는 폭이 바뀝니다.
     손잡이를 키보드로 선택한 뒤 좌우 화살표 키로도 움직일 수 있습니다.
  ▶ 사진 위 요소는 CSS 에서 pointer-events:none 이라, 위치 계산이 항상 사진 틀 기준입니다.
  ▶ 주의: 이 탭에는 이중 중괄호를 한 글자도 쓰지 않습니다 (저장 거부 원인).
  ============================================================ */

const STEP = 4;
const frame = document.querySelector('.nk-ba__frame');
const layer = document.querySelector('.nk-ba__layer');
const handle = document.querySelector('.nk-ba__handle');

let position = 50;
let dragging = false;

function apply(next) {
 position = Math.max(0, Math.min(100, next));

 if (layer) {
   /* 손잡이 왼쪽은 이전 사진, 오른쪽은 이후 사진이 보이게 잘라냅니다 */
   layer.style.clipPath = 'inset(0 0 0 ' + position + '%)';
 }
 if (handle) {
   handle.style.left = position + '%';
   handle.setAttribute('aria-valuenow', String(Math.round(position)));
 }
}

function moveTo(event) {
 const width = frame.offsetWidth;
 if (!width) { return; }
 apply((event.offsetX / width) * 100);
}

if (frame && layer && handle) {
 apply(50);

 frame.addEventListener('pointerdown', function (event) {
   dragging = true;
   moveTo(event);
 });

 frame.addEventListener('pointermove', function (event) {
   if (dragging) { moveTo(event); }
 });

 frame.addEventListener('pointerup', function () {
   dragging = false;
 });

 frame.addEventListener('pointerleave', function () {
   dragging = false;
 });

 handle.addEventListener('keydown', function (event) {
   if (event.key === 'ArrowLeft') { apply(position - STEP); }
   if (event.key === 'ArrowRight') { apply(position + STEP); }
 });
}

/* ── 위젯이 놓인 "칸"의 너비를 재서 모바일/PC 모양을 바꿉니다 ──
  아임웹 편집화면의 모바일 보기는 브라우저 창이 아니라 위젯 칸만 좁아지기 때문에
  창 너비 기준(@media)만으로는 모양이 바뀌지 않습니다. 이 코드가 그걸 보완합니다.
  지우면 편집화면 모바일 보기에서 PC 모양 그대로 보입니다. */
const nkBox = document.querySelector('.nk-ba');

function nkSyncWidth() {
 if (!nkBox) { return; }
 nkBox.setAttribute('data-w', nkBox.offsetWidth <= 768 ? 'mo' : 'pc');
}

nkSyncWidth();

if (nkBox && typeof ResizeObserver !== 'undefined') {
 const nkWatcher = new ResizeObserver(nkSyncWidth);
 nkWatcher.observe(nkBox);
}
 

혹시나 해서 다른 위젯 선택해서 텍스트 편집기에서 위와 같이 CSS,JS는 나타나는데 HTML만 이렇게 나타나고 있습니다.. ㅠㅠ

맥북사용 중이라 mac을 다운받아 사용중입니다

아마도 원인을 알아내면 부끄럽고 이불킥일 것 같지만..

현재 제 지식으로는 잘 몰라서 여쭤봅니다! ㅠㅠ