리액트 CSS - pre 태그로 입력한 그대로 보여주기

리액트 전체 링크

 

참고

- ㄱ 한자 1 특수 문자로 공백 추가하여 띄어쓰기

 

아래와 같이 content를 div 태그에 넣어보자.

입력한 대로 출력되지 않는다.

import React from "react";
import "./App.css";

const content = `int sum = 0;
for(int i = 0; i < 10; i++) {
  if(i & 2)
    sum += i;
}
`;

const App = () => {
  return <div>{content}</div>;
};

export default App;

 

pre 태그를 이용하면 입력한대로 보여주는 것이 가능하다.

import React from "react";
import "./App.css";

const content = `int sum = 0;
for(int i = 0; i < 10; i++) {
  if(i & 2)
    sum += i;
}
`;

const App = () => {
  return (
    <div>
      <pre>{content}</pre>
    </div>
  );
};

export default App;

 

tab으로 띄어쓰기한 곳의 크기를 변경하고 싶다면 css style option에서 tabSize를 변경하면 된다.

<pre style={{tabSize:10}}>{content}</pre>

 

그런데 tab-size를 바꿨지만, 반영이 되지 않는 경우도 있다.

 

실제 탭을 검색해보면 아무것도 찾지 못한다.

 

[View] → [Command Palette...]를 눌러보자. (또는 Ctrl + Shift + P 키)

 

현재 탭 표시를 스페이스 바가 대체하고 있다.

원래 탭을 쓰려면 Convert Indentation to Tabs를 선택한다.

 

이제 탭이 정상적으로 검색이 된다.

 

그리고 tab 사이즈도 반영되는 것을 알 수 있다.