워드프레스 구텐베르크 블럭 편집기 코드 들여쓰기 유지 및 인라인 코드 삽입

워드프레스의 구텐베르크 에디터를 싫어하는 사용자들도 많은데 개인적으로는 꽤 나 좋아 합니다.

다양한 블로그 에디터를 사용 해 봤지만 워드프레스 에디터가 가장 기능도 다양하고 안정적으로 원하는 방식으로 글을 작성 할 수 있는 것 같습니다.

그런데 워드프레스에서 글을 작성 하거나 코드를 붙여넣기 하거나 직접 작성 하면 들여쓰기가 되지 않습니다.

들여쓰기_적용_불가
들여쓰기 적용 불가

이와 같이 공백 없이 일렬로 정렬이 되는 것을 볼 수 있습니다.

그래서 오늘은 워드프레스의 구텐베르크 블럭 편집기에서 코드에서 포함 된 들여쓰기를 그대로 유지해서 입력하는 방법에 대해서 알아 봅니다.


해당 포스트는 충분한 테스트 및 검증 후 작성 되었지만 이것이 해당 내용의 정확성이나 신뢰성에 대해 보증을 하는 것은 아니니 단순 하게 참고용으로 봐주시길 바랍니다.

튜토리얼 환경 : 윈도우 11 (빌드: 22000.348)

코드 블럭 들여쓰기 유지 하기

코드를 일반 블럭에 작성 하게 되면 폰트 와 여백 등이 단순하게 기본 적인 방식으로 표기 됩니다.

하지만 워드프레스 자체적으로 코드를 표기 할 수 있는 몇 가지 옵션들을 제공 하고 있습니다.

블럭_추가_버튼_클릭
블럭 추가 버튼 클릭
  1. 블럭 에디터 화면에서 '블럭 삽입기 토글' 버튼 추가 버튼 을 마우스로 클릭 합니다.
코드_블럭_추가
코드 블럭 추가
  1. 다양한 종류의 블록 유형이 있는데 이곳에서 코드 를 선택 합니다.
코드_삽입_후_미리보기
코드 삽입 후 미리보기
  1. 추가 된 코드 블럭 (1) 에 Syntex 등을 삽입 합니다. 코드 블럭으로 변경 되면 블럭의 색상 도 변경 되는 것을 볼 수 있습니다.
  2. 추가 후 결과를 확인 하기 위해 미리보기 (2) 를 클릭 합니다.
들여쓰기_유지
들여쓰기 유지
  1. 이와 같이 정상적으로 들여쓰기가 유지 되는 것을 볼 수 있습니다. 실제 출력 되는 화면에서도 코드 블럭이 회색으로 변경 된 것을 볼 수 있습니다.

인라인 코드 삽입하기

전체 블럭이 아닌 블럭 내 일부 만 코드로 보이게 하고 싶을 수 있습니다. 이 경우 인라인 코드 로 지정 할 수 있습니다.

인라인_코드
인라인 코드
  1. 블럭에서 글을 작성 하다 코드 삽입이 필요한 곳에 커서를 두고 툴바의 더보기 더보기 (1) 버튼을 클릭 해 옵션 패널을 확장 합니다.
  2. '더보기 옵션 에서 인라인 코드 (2) 를 선택 합니다.
    • 인라인 코드를 클릭 하고 내용을 입력 하거나
    • 입력 된 단어 또는 문장을 범위 지정 후 코드 형식으로 변경이 가능 합니다.
    • 코드 이외에도 다양한 옵션을 블럭 내에 추가 할 수 있습니다.
단일_블럭_내_코드_추가_삽입_가능
단일 블럭 내 코드 추가 삽입 가능
  1. 이와 같이 블럭 내 일부 만 코드로 변경 할 수 있습니다. 이 부분도 CSS 를 수정 하면 조금 더 보기 좋게 변경 할 수 있습니다.

마무리

이렇게 워드프레스 의 메인 에디터인 구텐베르그 블럭 편집기에서 코드 입력시 들여쓰기 유지되지 않는 문제를 해결 하는 방법 에 대해 알아 보았습니다.

이 외에도 다양한 기능 들이 많이 포함 되어 있으니 처음 시작 하는 경우 하나하나 찾아서 적용 해보면 포스트 작성 시 여러모로 도움이 될 것 입니다.

참고

본 글의 저작권은 comeinsidebox.com에 있습니다. comeinsidebox.com의 사전 서면 동의 없이 본 글의 전부 또는 일부를 무단으로 전재, 게시, 배포하는 것을 금지합니다.
댓글로 남기기 어려운 내용은 Contact Form 링크를 이용해 개별적으로 문의 할 수 있습니다. 해당 포스트와 연관 된 문의 시 Copy를 눌러  URL 을 복사 후 등록 해야 합니다.

Leave a Comment