Writerside Components

파일을 다운받게 하는 방법

프로젝트 루트의 resources 디렉토리에 파일을 넣어 두고, 본문에 마크업을 입력한다.

Donwload file and open it.

Donwload <resource src="sample.hwp"/> and open it.

writerside의 semantic elements는 현재 총 77개다.

warning

<warning>If you delete a user, all their transactions 
    will also be erased from the database.</warning>

resource

샘플문서 다운로드

img

i

ideomatic & italic

ideomatic & italic

a

<a href="Quickstart.md" summary="Show this text in the tooltip">
    Some link
</a>

Some link

b

bold

bold and not

br

줄바꿈 (break)

줄바꿈
(break)

table

asdf	zxcv	qwer
First cell in the first row	Second cell in the first row	Third cell in the first row

tabs

탭을 그룹으로 묶어준다.

<tabs>
    <tab title="Foo">Content of tab Foo</tab>
    <tab title="Bar">Content of tab Bar</tab>
</tabs>

Content of tab Foo

Content of tab Bar

<tabs>
    <code-block lang="java">Java code</code-block>
    <code-block lang="groovy">Groovy code</code-block>
</tabs>

Java code

Groovy code

tip

<tip>Alternatively, you can change the settings 
    directly in the configuration file.</tip>

note

<note>
    Use a note for important information that the reader 
    should be aware of, like known issues or limitations.
</note>

tldr

<tldr>
    <p>Shortcut: <shortcut>Ctrl+Space</shortcut></p>
    <p>Configure: 
        <ui-path>
        Settings / Preferences | Editor | Code Completion
    </ui-path>
    </p>
</tldr>

Choose your <tooltip term="foo">OS</tooltip>.

Choose your OS.

ui-path

<p>From the main menu, select <ui-path>File | New | Project</ui-path>.
</p>

From the main menu, select File | New | Project.

video

p

<p id="unique-id">
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna
    aliqua.
</p>

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.

inline elements

<procedure id="example-procedure">
    <step>
        Click <control>OK</control>,
        call <code>doThis()</code>,
        open <path>file.txt</path>,
        select <ui-path>Edit | Copy</ui-path>,
        and stay <emphasis>focused</emphasis>.</step>
</procedure>

Click OK, call doThis(), open file.txt, select Edit | Copy, and stay focused.

chapter

<chapter title="Example chapter" id="example-chapter-id">
   <p>Some text.</p>
   <chapter title="Subchapter" id="subchapter">
       <p>Some more text.</p>
   </chapter>
</chapter>

Example chapter

Some text.

Subchapter

Some more text.

procedure

<procedure title="Add something" id="procedure-id">
   <p>Before adding something, create it.</p>
   <step>Do this.</step>
   <step>Do that.</step>
   <p>Congratulation! You've added something.</p>
</procedure>

Add something

Before adding something, create it.

Do this.
Do that.

Congratulation! You've added something.

preview-src

![Alt Text](001.png){ thumbnail="true" preview-src="001.png" }

link-summary

<div>
<link-summary rel="some-paragraph"/>
<p id="some-paragraph">Use this paragraph as a link summary</p>
</div>

card-summary

<card-summary>
    Use card summaries to provide context for cards.
</card-summary>

Math expressions

<code-block lang="tex">
    \begin{equation}
    x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
    \end{equation}
</code-block>

Last modified: 25 December 2024

pyhwpx Documentation main Help