부호 편집기에 붙여넣기 시 클립보드 데이터의 `white-space` CSS 속성이 반영되지 않음

물론입니다. 이 정보가 도움이 되길 바랍니다. 이전 제 발언을 다시 한 번 강조하고 싶습니다:

다만, 제 생각이 틀렸을 수도 있습니다 :slightly_smiling_face:.

  1. 다음 C++ 코드를 복사하세요:
    #include <iostream>
    int main() {
      std::cout << __FILE__;
    }
    
  2. 게시물 작성기를 열립니다.
  3. 작성기를 “리치 텍스트 에디터” 모드로 설정합니다.
  4. 복사한 내용을 작성기에 붙여넣습니다.

:slightly_frowning_face: 내용이 손상됩니다:

#include
int main() {
std::cout << FILE;
}

(<iostream>이 지원되지 않는 HTML 태그와 유사하여 제거되었고, __FILE__가 굵은 글씨 마크업으로 처리되었음을 유의하세요)

이것은 비프로즈(non-prose) 내용을 붙여넣기 전에 코드 블록을 트리거하면 피할 수 있으므로 사용자 오류로 볼 수도 있습니다. 그러나 붙여넣은 내용에 사후적으로 코드 블록 서식을 적용하는 대안 워크플로우도 동등하게 유효해야 한다고 기대할 수 있습니다(Markdown 에디터 사용 시와 같이).

장비

  • Arduino 보드 (공식 제품 또는 3rd party 제품)

설명

  1. Arduino 웹사이트 “Software” 페이지에서 다운로드할 수 있는 Arduino IDE 2.3.6을 설치하세요:
    https://www.arduino.cc/en/software/#ide-download-section
  2. Arduino IDE를 시작합니다.
  3. Arduino IDE 메뉴에서 File > New Sketch를 선택합니다.
  4. 새 스케치의 내용을 다음 코드로 교체합니다:
    void setup() {
      Serial.begin(9600);
      while (!Serial) {}  // Wait for serial port to be opened.
      delay(500);         // Some boards require a delay after serial port initialization.
      Serial.println("foo");
      Serial.println("bar");
    }
    void loop() {}
    
  5. Arduino IDE 메뉴에서 Tools > Serial Monitor를 선택하여 Serial Monitor 뷰를 엽니다(이미 열려 있지 않은 경우).
  6. Serial Monitor 뷰의 보드레이트 메뉴에서 "9600"을 선택합니다.
  7. 스케치를 Arduino 보드에 업로드합니다.
  8. Serial Monitor 뷰의 필드에서 시리얼 출력을 선택합니다.
  9. 선택된 내용을 복사합니다.
  10. Discourse 게시물 작성기를 엽니다.
  11. 작성기를 “리치 텍스트 에디터” 모드로 설정합니다.
  12. 복사한 내용을 작성기에 붙여넣습니다.

:slightly_frowning_face: 복사된 내용의 각 줄이 별도의 코드 블록에 배치됩니다:

foo

bar

클립보드 내용을 검사하면, 예상되는 “text/plain” 유형 내용 외에:

foo
bar

다음과 같은 “text/html” 유형 내용도 포함되어 있음을 볼 수 있습니다:

<div style="color: rgb(78, 91, 97); font-family: monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: nowrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: absolute; left: 0px; top: 0px; height: 18px; width: 1862px;"><pre style="margin: 0px;">foo
</pre></div><div style="color: rgb(78, 91, 97); font-family: monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: nowrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: absolute; left: 0px; top: 18px; height: 18px; width: 1862px;"><pre style="margin: 0px;">bar</pre></div>

Arduino IDE 2.x Serial Monitor가 복사된 “text/html” 유형 내용의 각 줄을 <pre> 태그로 잘못 감싸기 때문에, Discourse 리치 텍스트 에디터가 붙여넣은 내용의 각 줄을 별도의 코드 블록으로 렌더링하는 것은 정확하고 예상된 동작입니다.

위에서 설명한 다른 문제와 마찬가지로, 내용을 붙여넣기 전에 선제적으로 코드 블록 서식을 트리거하면 예상치 못한 서식 문제를 피할 수 있습니다.

2개의 좋아요