단락 들여쓰기 텍스트?

제품 지원
1

바보 같다는 느낌이 드는데, 왜 이게 작동하지 않는지 도무지 모르겠어요:

<div style="margin-left: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

다음과 같은 결과가 나와요:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

문제는 들여쓰기가 되지 않는다는 거예요!

어떤 이유에서든 비직관적일 수 있지만, 텍스트 들여쓰기를 지원하는 방법이 어딘가에는 있을 거잖아요, 맞죠?

2

   들여쓰기가 필요할 때 &emsp;를 몇 개 사용하지만, 첫 줄에만 적용됩니다.

3

하지만 이렇게 하면 단락의 첫 번째 줄만 처리됩니다.

4

입에 올랐는데 말이죠. :slightly_smiling_face:

수정: 목록 항목의 새 단락에 공백 4칸을 추가해 정렬을 유지하는 경우와 혼동했었네요.

텍스트 블록을 <ul> </ul>로 감싸면 들여쓰기가 적용된다는 것을 발견했습니다. 약간 뻣뻣한 방법(hacky)이지만, 아래에 있는 래핑 솔루션을 생성하기 위한 관리자 설정에 접근할 수 없는 경우 유용할 수 있습니다.

예를 들어.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
5

마크다운에서 네 칸 공백이 코드 블록이라는 확신이 강합니다

6

Discourse는 특정 HTML 태그와 속성만 화이트리스트에 포함합니다. style 속성은 사실상 거의 모든 것을 제어할 수 있기 때문에 완전히 차단하고 있을 것이라고 추측합니다.

7

사이트 설정에서 태그/속성을 더 많이 허용할 수 있는 방법이 있을까요?

8

사이트 설정에서 관련 항목을 찾지 못했지만, 플러그인을 통해 가능할 수도 있습니다. HTML 태그와 관련된 두 가지 파일을 찾았는데, 참고할 만한 내용일 것 같습니다. 개인적으로는 style 속성을 화이트리스트에 추가하는 것은 위험하다고 생각합니다.

9

div 스타일은 화이트리스트에 포함되어 있지 않은 것으로 보입니다. 플러그인이나 컴포넌트가 필요합니다. 하지만 관리 포럼에서 직접 wrap bbcode를 만들 수 있습니다. 이 줄들을 사용자 지정 > 내 테마 또는 컴포넌트 > CSS 공통에 추가하세요.

[data-wrap="indent"] {
    margin-left: 20px;
}

그런 다음 게시글에서 원하는 텍스트에 이 코드를 사용하세요:

[wrap="indent"]
Your paragraph
[/wrap]
10

그렇게 할 수 있다는 걸 몰랐어요. 제 포럼에서는 data-theme 속성이 있는 span을 사용했어요:

image
image372×172 4.02 KB

(여기서 실시간으로 볼 수 있어요: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

[wrap] 태그는 어떤 면에서 다른가요? 인라인 스타일에 사용할 수 있나요?
게시물 스타일을 커스터마이즈하는 다른 방법이 있을까요?

11

div 요소를 사용하므로 꽤 많은 부분을 커스터마이징할 수 있지만, 인라인 스타일의 경우 제 생각에는 당신의 옵션이 가장 좋습니다.

처음부터 더 많은 옵션이 있는지 확신은 없습니다. 제가 자주 사용하는 기능이 있으면, div 클래스나 bbcode를 생성하고 툴바에 아이콘을 추가하는 플러그인이나 컴포넌트를 사용합니다.

12

한 가지 간단한 질문이 있습니다. 어떻게 해야 하나요?

13

제 theme-component를 예시로 참고할 수 있습니다:

도구 모음(Toolbar)에 아이콘을 추가하거나 기어 메뉴에 추가하는 두 가지 옵션이 있습니다.

image
image485×241 3.13 KB

도구 모음(Toolbar):

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "align_justify_button",
        group: "extras",
        icon: "align-justify",
        perform: e => e.applySurround('[wrap="justify"]\n', '\n[/wrap]', 'align_justify_text')
    });
});

기어 메뉴

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "floatleft",
      icon: "indent",
      label: "float_left_button"
  };
});

플러그인을 사용하면 추가 옵션을 사용할 수 있지만, 이 컴포넌트만으로도 충분할 것입니다: GitHub - MonDiscourse/discourse-formatting-toolbar: Add formatting options on your post (center, align to right, justify a text, etc.) · GitHub