මම දැන් මාර්ක්ඩවුන් සමඟ ආරම්භ කළෙමි. මම එයට කැමතියි, නමුත් මට දෝෂාරෝපණය කරන එක් දෙයක් තිබේ: මාක්ඩවුන් භාවිතා කරමින් රූපයක ප්‍රමාණය වෙනස් කරන්නේ කෙසේද?

ප්‍රලේඛනය රූපයක් සඳහා පහත සඳහන් යෝජනාව පමණක් ලබා දෙයි:

![drawing](drawing.jpg)

හැකි නම් පින්තූරය ද කේන්ද්‍රගත වීමට මම කැමතියි. මම ඉල්ලන්නේ GitHub එය කරන්නේ කෙසේද යන්න පමණක් නොව සාමාන්‍ය මාර්ක්ඩවුන් ය.

සමහර මාර්ක්ඩවුන් ක්‍රියාවට නැංවීම් සමඟ ( මවු සහ සලකුණු කළ 2 (මැකෝස් පමණක් ඇතුළුව )) ඔබට =WIDTHxHEIGHTග්‍රැෆික් ගොනුවේ URL එකෙන් පසුව රූපය ප්‍රමාණය වෙනස් කිරීමට එකතු කළ හැකිය . පෙර අවකාශය අමතක නොකරන්න =.

![](./pic/pic1_50.png =100x20)

ඔබට උස මඟ හැරිය හැක

![](./pic/pic1s.png =250x)

ඔබේ මාර්ක්ඩවුන් හි ඔබට HTML කිහිපයක් භාවිතා කළ හැකිය:

<img src="drawing.jpg" alt="drawing" width="200"/>

හෝ styleගුණාංගය හරහා ( GitHub සහාය නොදක්වයි )

<img src="drawing.jpg" alt="drawing" style="width:200px;"/>

හෝ මාර්ක්ඩවුන් සහ රූප පෙළගැස්වීම පිළිබඳ මෙම පිළිතුරෙහි විස්තර කර ඇති පරිදි ඔබට අභිරුචි CSS ගොනුවක් භාවිතා කළ හැකිය

![drawing](drawing.jpg)

වෙනත් ගොනුවක CSS:

img[alt=drawing] { width: 200px; }

මෙහි පිළිගත් පිළිතුර Ghost, Stackedit.io වැනි මේ දක්වා මා භාවිතා කර ඇති යෙදුම්වල හෝ Stack Overflow සංස්කාරකයේ ඇති කිසිදු මාර්ක්ඩවුන් සංස්කාරකයක් සමඟ ක්‍රියා නොකරයි. මම මෙහි StackEdit.io නිකුතුව ට්රැකර් හි වැඩකරන විසඳුමක් සොයා ගතිමි .

විසඳුම වන්නේ HTML සින්ටැක්ස් කෙලින්ම භාවිතා කිරීමයි, එය පරිපූර්ණව ක්‍රියා කරයි:

<img src="http://....jpg" width="200" height="200" />

මම හිතනවා මේක උදව් වෙයි කියලා.

භාවිතා කරන්න:

<img src="Assets/icon.png" width="200">

වෙනුවට:

![](Assets/icon.png)

ඔබ PanDoc සඳහා MarkDown ලියන්නේ නම්, ඔබට මෙය කළ හැකිය:

![drawing](drawing.jpg){ width=50% }

මෙම එකතු style="width: 50%;"වන HTML වලට <img>ටැගය, හෝ [width=0.5\textwidth]කිරීමට \includegraphicsLaTeX දී.

මුලාශ්‍රය: http://pandoc.org/MANUAL.html#extension-link_attributes

සමහර විට මෙය මෑතකදී වෙනස් වී ඇති නමුත් Kramdown ලියකියවිලි සරල විසඳුමක් පෙන්වයි.

ලියකියවිලි වලින්

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.

And here is a referenced ![smile]

[smile]: smile.png
{: height="36px" width="36px"}

ජෙකිල් සහ ක්‍රැම්ඩවුන් සමඟ ගිතුබ් මත ක්‍රියා කරයි.

එක් මත ඇඳිය altවිශේෂණය Markdown නිර්මාණයන් සියල්ල පාහේ සකස් කළ හැකි බව / renderes CSS-තේරීම් සමග එක්ව විශේෂණය වටිනාකම් මත පදනම්. වාසිය නම් කෙනෙකුට විවිධ පින්තූර ප්‍රමාණයන්ගෙන් (සහ තවත් ගුණාංග) පහසුවෙන් අර්ථ දැක්විය හැකිය.

ලකුණු කිරීම:

![minipic](mypic.jpg)

CSS:

img[alt="minipic"] { 
  max-width:  20px; 
  display: block;
}

![title](image-url.type)සමඟ ප්රතිස්ථාපනය කරන්න<img src="https://image-url.type" width="200" height="200">

පිළිතුරු දෙකක් ඒකාබද්ධ කරමින් මම විසඳුමක් ඉදිරිපත් කළෙමි,
එය එතරම් ලස්සන නොවන බව පෙනේ, නමුත් එය ක්‍රියාත්මක වේ!

එය උපරිම විභේදන රූපයට ඔබව ගෙන ඒමට ක්ලික් කළ හැකි නිශ්චිත ප්‍රමාණයක් සහිත සිඟිති රූපයක් නිර්මාණය කරයි.

[<img src="image.png" width="250"/>](image.png)

මෙන්න උදාහරණයක්! මම එය දෘශ්‍ය කේතය සහ ගිතුබ් මත පරීක්ෂා කළෙමි.

ඔබ kramdown භාවිතා කරන්නේ නම් , ඔබට මෙය කළ හැකිය:

{:.foo}
![drawing](drawing.jpg)

ඉන්පසු මෙය ඔබගේ අභිරුචි CSS වෙත එක් කරන්න :

.foo {
  text-align: center;
  width: 100px;
}

Tiemes පිළිතුර සිට මතද, ඔබ භාවිතා කරන්නේ නම්, CSS 3 ඔබ භාවිතා කළ හැකිය substring තේරීම් :

මෙම තේරීම ඕනෑම රූපයක් alt-tag සමඟ අවසන් වන '-fullwidth' සමඟ ගැලපේ:

img[alt$="-fullwidth"]{
  width:  100%;
  display: block;
}

රූපය විස්තර කිරීම සඳහා එහි අපේක්ෂිත අරමුණ සඳහා ඔබට තවමත් alt ටැගය භාවිතා කළ හැකිය .

ඉහත සඳහන් ලකුණු කිරීම පහත පරිදි විය හැකිය:

![Picture of the Beach -fullwidth](beach.jpg)

මම මෙය Ghost markdown හි භාවිතා කර ඇති අතර එය හොඳින් ක්‍රියාත්මක වේ.

මම මෙහි පැමිණියේ පිළිතුරක් සොයමින්. මෙහි නියම යෝජනා කිහිපයක්. සලකුණු කිරීම HTMl සඳහා පූර්ණ සහය දක්වන බව පෙන්වන රන් තොරතුරු!

හොඳ පිරිසිදු විසඳුමක් වන්නේ සෑම විටම පිරිසිදු html සින්ටැක්ස් සමඟ යාමයි. ටැගය සමඟ.

නමුත් මම තවමත් මාර්ක්ඩවුන් සින්ටැක්ස් වලට ඇලී සිටීමට උත්සාහ කළෙමි. එබැවින් මම එය ටැගයක් වටා එතීමට උත්සාහ කළෙමි. එය වැඩ කරයි !!

<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>

ඉතින් මේ ආකාරයෙන් බාහිර රූප සඳහා සහය දක්වයි!

කිසිම පිළිතුරක නැති නිසා මම මෙය එළියට දමනු ඇතැයි සිතුවෙමි. :)

rmarkdownසහ knitrවිසඳුමක මැදිහත් වූ අය සඳහා . .rmdභාවිතයෙන් තොරව ගොනුවක පින්තූර ප්‍රමාණය වෙනස් කිරීමට ක්‍රම කිහිපයක් තිබේ html:

එකතු කිරීමෙන් ඔබට රූපයක් සඳහා පළලක් නියම කළ හැකිය {width=123px}. වරහන් අතර සුදු අවකාශය හඳුන්වා නොදෙන්න:

![image description]('your-image.png'){width=250px}

තවත් විකල්පයක් වන්නේ knitr::include_graphics:

```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```

ජෙකිල් හි අභිරුචි ප්‍රමාණයේ img ටැගයක් භාවිතා කිරීම සඳහා මම සරල ටැග් විග්‍රහකය තිර රචනය කළෙමි .

https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079

{% img /path/to/img.png 100x200 %}

ඔබට ගොනුව _pluginsෆෝල්ඩරයට එක් කළ හැකිය .

මෙම පිළිතුර ටිකක් විශේෂිත බව මම දනිමි, නමුත් එය අවශ්‍යතා ඇති අයට උපකාර කරනු ඇත.

Imgur සේවාව භාවිතයෙන් බොහෝ ඡායාරූප උඩුගත කර ඇති බැවින් , ඔබට මෙහි විස්තර කර ඇති API භාවිතා කර ඡායාරූපයේ ප්‍රමාණය වෙනස් කළ හැකිය.

GitHub නිකුතුවක ඡායාරූපයක් උඩුගත කරන විට, එය ඉම්ගුර් හරහා එක් කරනු ඇත, එබැවින් ඡායාරූපය ඉතා විශාල නම් මෙය බොහෝ සෙයින් උපකාරී වනු ඇත.

මූලික වශයෙන්, http://i.imgur.com/12345.jpg වෙනුවට , ඔබ මධ්‍යම ප්‍රමාණයේ රූප සඳහා http://i.imgur.com/12345m.jpg දමනු ඇත.

ඔබට මෙය ක්‍රෑම්ඩවුන් සමඟද භාවිතා කළ හැකිය:

markdown
![drawing](drawing.jpg)   
{:.some-css-class style="width: 200px"}

හෝ

markdown
![drawing](drawing.jpg)   
{:.some-css-class width="200"}

මේ ආකාරයෙන් ඔබට අවසාන html මූලද්‍රව්‍යයට අත්තනෝමතික ගුණාංග කෙලින්ම එකතු කළ හැකිය. පන්ති එකතු කිරීම සඳහා .class.secondclass කෙටිමඟක් ඇත .

R markdown / bookdown හි වැඩ කරන විසඳුම් සොයන සියල්ලන්ටම , මෙම පෙර විසඳුම් ක්‍රියා නොකරයි / ක්‍රියා නොකරයි හෝ සුළු අනුවර්තනයක් අවශ්‍ය නොවේ:

වැඩ

• එකතු කරන්න { width=50% }හෝ{ width=50% height=50% }

  • ![foo](foo.png){ width=50% }

  • ![foo](foo.png){ width=50% height=50% }

  • වැදගත්: පළල සහ උස අතර කොමාවක් නැත - එනම් ක්‍රියා { width=50%, height=30% } නොකරනු ඇත !

• එකතු කරන්න { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • සටහන: {:height="36px" width="36px"} කොලොන් සමඟ, ay සයිත් මෙන්, ආර් ලකුණු කිරීම සමඟ ක්‍රියා නොකරන බව පෙනේ

වැඩ කරන්නේ නැත:

• එකතු කරන්න =WIDTHxHEIGHT
  • රූපය ප්‍රතිප්‍රමාණනය කිරීම සඳහා ග්‍රැෆික් ගොනුවේ URL පසු (roprosseek සිට)
  • වත් =WIDTHxHEIGHT ![foo](foo.png =100x20)හෝ =WIDTHපමණක් ![foo](foo.png =250x)වැඩ කටයුතු

R-Markdown සඳහා, ඉහත විසඳුම් කිසිවක් මා වෙනුවෙන් ක්‍රියාත්මක නොවූ නිසා මම සාමාන්‍ය LaTeX සින්ටැක්ස් වෙත යොමු වූ අතර එය හොඳින් ක්‍රියාත්මක වේ.

\begin{figure}
 \includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}

එවිට ඔබට \begin{center}රූපය කේන්ද්‍රගත කිරීම සඳහා උදා .

Add class සහ css ශෛලිය සමඟ ක්‍රමයක් තිබේ

![pic][logo]{.classname}

ඉන්පසු සබැඳිය සහ css පහතින් ලියන්න

[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>

මෙහි යොමුව

අනාගත යොමු කිරීම සඳහා:

ජොප්ලින් සඳහා මාර්ක්ඩවුන් ක්‍රියාවට නැංවීම මඟින් ආනයනික රූපවල ප්‍රමාණය පහත පරිදි පාලනය කිරීමට ඉඩ ලබා දේ:

<img src=":/7653a812439451eb1803236687a70ca" width="450"/>

මෙම අංගය මෙහි ඉල්ලා ඇති අතර ලෝරන්ට් පොරොන්දු වූ පරිදි මෙය ක්‍රියාත්මක කර ඇත.

ජොප්ලින් නිශ්චිත පිළිතුර සොයා ගැනීමට මට යම් කාලයක් ගත විය.

මෙය මට වැඩ කරන්නේ එය එක් පේළියක නොව නමුත් එය ඔබ වෙනුවෙන් වැඩ කරනු ඇතැයි මම බලාපොරොත්තු වෙමි.

<div>
<img src="attachment:image.png" width="500" height="300"/>
</div>

ඔබ ගිහුබ් රසකාරක සලකුණු වල යොමු ශෛලියේ රූප භාවිතා කරන්නේ නම් :

Here is an image of tree: 
![alt text][tree]{height=400px width=500px}


[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"

ප්‍රභව URL එකට සාපේක්ෂ මානයන් එකතු කිරීම බහුතරයක් මාර්ක්ඩවුන් විදැහුම්කරුවන් තුළ සිදු කෙරේ.

අපි මෙය කොරිල්ලා හි ක්‍රියාත්මක කළේ රටාව මූලික HTML මත යැපීමට පරිශීලකයා තල්ලු නොකර පවත්නා කාර්ය ප්‍රවාහයන්ගේ අපේක්ෂාවන් අනුගමනය කරන රටාවක් ලෙස ය. ඔබගේ ප්‍රියතම මෙවලම සමාන රටාවක් අනුගමනය නොකරන්නේ නම් විශේෂාංග ඉල්ලීමක් ඉදිරිපත් කිරීම වටී.

සින්ටැක්ස් සඳහා උදාහරණය:

![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)

පූස් පැටවාගේ උදාහරණය:

ජුපිටර් නෝට්බුක්හි සලකුණු රූප ඇමුණුම් ප්‍රමාණය වෙනස් කිරීම

මම jupyter_core-4.4.0& ජුපිටර් නෝට්බුක් භාවිතා කරමි.

ඔබේ පින්තූර මේ ආකාරයට සලකුණු කොටසට ඇතුළත් කිරීමෙන් ඔබ ඒවා අමුණන්නේ නම්:

![Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png](attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png)

මෙම attachmentසබැඳි නැහැ වැඩ:

<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>

මෙය කරන්න . මෙය ක්‍රියාත්මක වේ.

Div වරහන් එක් කරන්න.

<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>

මෙය උපකාරී වේ යැයි සිතමු!

ෆ්ලැස්ක් භාවිතා කරන විට (මම එය පැතලි පිටු සමඟ භාවිතා කරමි) ... පැහැදිලිව (කිසියම් හේතුවක් නිසා පෙරනිමියෙන් නොවේ) සක්‍රිය කිරීම සලකුණු කිරීමේ ඇමතුම තුළ දිගුවල 'attr_list' උපක්‍රමය කරන බව මට පෙනී ගියේය - එවිට යමෙකුට ගුණාංග භාවිතා කළ හැකිය (CSS වෙත ප්‍රවේශ වීමටද ඉතා ප්‍රයෝජනවත් වේ - උදාහරණයක් ලෙස class = "my class" ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

සහ ශ්‍රිතය:

def prerender_jinja(text):
    prerendered_body = render_template_string(Markup(text))
    pygmented_body   = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
    return pygmented_body

ඉන්පසු මාර්ක්ඩවුන් හි:

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}

ආරම්භක ලකුණු කිරීම වෙනස් කිරීම ඔබට විකල්පයක් නොවේ නම්, මෙම අනවසරයෙන් ක්‍රියා කළ හැකිය:

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

ඊමේල් පණිවුඩයක් යැවීමට පෙර පින්තූර ප්‍රමාණය වෙනස් කිරීමට මම මෙය භාවිතා කළෙමි (Outlook ඕනෑම රූපයක් CSS මෝස්තරය නොසලකා හරින බැවින්)

සඳහා IntelliJ IDEA පරිශීලකයන්, කරුණාකර Markdown Navigator ප්ලගිනය.

පෙරදසුන මඟින් රූප, ලාංඡන, HTML යනාදිය සපයයි.

ටයිම්ගේ පිළිතුර බොහෝ අවස්ථාවන් සඳහා හොඳම වේ.

මගේ නඩුවේදී, මම ලකුණු කිරීම රබර් කිරි බවට පරිවර්තනය කිරීම සඳහා පැන්ඩොක් භාවිතා කරමි. HTML ටැග් මෙහි ක්‍රියා නොකරයි.

මගේ විසඳුම නැවත ක්‍රියාත්මක කිරීමයි \includegraphics

\let\maxincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}

HTML බවට පරිවර්තනය කිරීමෙන් පසු CSS භාවිතා කිරීමට සමාන වේ.