Notes

Markdown dosyalarındaki göreceli resim yollarının Electron + marked.js
uygulamanızda nasıl işlenmesi gerektiğine dair teknik açıklamalar aşağıdadır:


1. Markdown Dosyasının Uygulama İçinde Nasıl Render Edilmesi Gerektiği

Uygulamanız marked.js kullanıyorsa, image_test.md dosyasındaki ![Test
Image](./images/test.png) içeriği şu adımlarla işlenir:


1. Markdown Ayrıştırma (Parsing): marked.js Markdown metnini alır ve bunu
HTML'e dönüştürür.  sözdizimini bir <img> HTML etiketine
dönüştürür.
2. HTML Çıktısı: marked.js tarafından üretilen çıktı, büyük olasılıkla
url('file://<ABSOLUTE_PATH_TO_YOUR_APP>/images/test.png') gibi bir şey
içermeyen, ancak url('./images/test.png') içeren basit bir <img
src="./images/test.png" alt="Test Image"> etiketi olacaktır.
3. DOM Enjeksiyonu: Bu HTML dizesi daha sonra uygulamanızın renderer
sürecindeki bir HTML elementine (örneğin, bir div veya iframe içine)
enjekte edilir.

2. Resim Görünmüyorsa Olası Nedenler

Resmin görünmemesinin birkaç olası nedeni olabilir:


* Yanlış Göreceli Yol: image_test.md dosyasının konumu ile images/test.png
dosyasının konumu arasındaki göreceli yol yanlış olabilir. marked.js
genellikle Markdown dosyasının kendisinin değil, HTML'in yüklendiği ana
HTML dosyasının (genellikle index.html) bağlamında göreceli yolları çözer.
* Dosya Erişim İzinleri: Electron uygulamasının images/test.png dosyasına
erişim izni olmayabilir. Özellikle Linux'ta dosya izinlerini kontrol edin.
* Electron `webSecurity`: Electron'da webSecurity varsayılan olarak etkindir
ve güvenlik nedenleriyle file:// protokolünden yerel dosyalara doğrudan
erişimi kısıtlayabilir. Bu, renderer sürecinin yerel dosya sisteminden
resim yüklemesini engelleyebilir.
* `marked.js` Yapılandırması: marked.js'in özel bir renderer veya eklenti
kullanarak src yollarını değiştiren bir yapılandırması olabilir.
* İçerik Güvenlik Politikası (CSP): Uygulamanız bir İçerik Güvenlik
Politikası (Content Security Policy - CSP) kullanıyorsa, bu politika yerel
kaynaklardan görüntü yüklemeyi engelleyebilir.
* `asar` Arşivleri: Uygulamanız asar arşivi içine paketlenmişse, asar
içindeki dosyalara erişim için özel yollar veya asar:// protokolü
gerekebilir. file:// protokolü genellikle asar arşivlerinin içindeki
dosyalara doğrudan erişmek için yeterli değildir.
* Resim Dosyasının Hasarlı Olması: test.png dosyasının kendisi hasarlı veya
bozuk olabilir.

Electron uygulamasında göreceli resim yollarının çözümlenmesi karmaşık
olabilir çünkü birden fazla bağlam devreye girer:


1. `marked.js` Bağlamı: marked.js, Markdown metnini HTML'e dönüştürürken
göreceli yolları değiştirmez. Olduğu gibi src="./images/test.png" olarak
bırakır.
2. Webview/Renderer Süreci Bağlamı: Renderer süreci (tarayıcı penceresi),
genellikle file://<APP_ROOT>/index.html gibi bir URL'den yüklenir. HTML
içindeki göreceli yollar, bu index.html dosyasının bulunduğu dizine göre
çözümlenir.
* Eğer index.html kök dizinde, image_test.md kök dizinde ve
images/test.png de kök dizindeki images klasöründeyse,
src="./images/test.png" doğru bir şekilde
file://<APP_ROOT>/images/test.png olarak çözümlenir.
* Ancak, image_test.md başka bir dizinde (./markdown_files/image_test.md)
ise ve içinde ./images/test.png yazıyorsa, HTML'e dönüştürüldüğünde bu
src yolu, index.html'in dizinine göre çözümlenecektir. Bu durumda,
<APP_ROOT>/images/test.png yerine
<APP_ROOT>/markdown_files/images/test.png aranır ve resim bulunamaz.

Çözüm Yolları:


* Mutlak Yollar: Resim yollarını mutlak yollara dönüştürmek en sağlam
çözümdür. marked.js'in walkTokens veya renderer seçeneklerini kullanarak
Markdown ayrıştırma sırasında göreceli yolları Electron'un app.getAppPath()
veya __dirname gibi metotlarını kullanarak tam dosya yollarına
dönüştürebilirsiniz.


1 const path = require('path');
2 const { marked } = require('marked');
3
4 const appRoot = process.env.NODE_ENV === 'development' ? __dirname :
require('electron').app.getAppPath(); // Veya kendi kök yolunuzu belirleyi
5
6 const renderer = new marked.Renderer();
7 renderer.image = (href, title, text) => {
8 if (href.startsWith('.')) { // Göreceli yol ise
9 const absolutePath = path.join(appRoot, href); // appRoot'a gö
çözümle
10 return `<img src="${absolutePath}" alt="${text}" title="${titl
|| ''}">`;
11 }
12 return `<img src="${href}" alt="${text}" title="${title || ''}">`;
13 };
14
15 marked.setOptions({ renderer: renderer });
* Electron `protocol` Modülü: Electron'un protocol modülünü kullanarak özel
bir protokol (örneğin, app-image://) kaydedebilir ve bu protokol üzerinden
resimlere erişebilirsiniz. Bu, asar arşivleriyle de iyi çalışır.

4. Uygulama Kodunda (main.js / renderer.js) Bakmanız Gereken Yerler


main.js (Main Process):

* `BrowserWindow` Oluşturma: webSecurity ve nodeIntegration ayarlarını
kontrol edin.


1 // main.js
2 const { BrowserWindow, app } = require('electron');
3
4 function createWindow () {
5 const win = new BrowserWindow({
6 width: 800,
7 height: 600,
8 webPreferences: {
9 nodeIntegration: true, // Eğer renderer sürecinde Node.js API'le
kullanılıyorsa
10 contextIsolation: false, // contextIsolation true ise farklı bir
yaklaşım gerekir
11 webSecurity: false, // Geliştirme aşamasında geçici olarak
kapatılabilir, ancak üretimde güvenli değildir.
12 // Bunun yerine özel protokoller veya mutlak
yollar tercih edilmelidir.
13 allowRunningInsecureContent: true // HTTP içeriklerine izin verm
için (nadiren kullanılır)
14 }
15 });
16
17 win.loadFile('index.html');
18 }
19
20 app.whenReady().then(createWindow);
* `protocol` Modülü Kullanımı: Eğer özel bir protokol tanımlanmışsa, burada
yapılandırmasını bulabilirsiniz.

renderer.js (Renderer Process) veya index.html içinde <script> etiketleri:


* `marked.js` Entegrasyonu:
* marked.js'in nerede markdown metnini HTML'e dönüştürdüğünü bulun.
Genellikle bir fonksiyon çağrısı marked(markdownString) şeklinde olur.
* marked.js'in nasıl yapılandırıldığına bakın (örneğin,
marked.setOptions() veya new marked.Renderer()). Özel bir renderer
nesnesi tanımlanmışsa, image metodunu kontrol edin. Bu metot, resim
yollarını değiştirmek için kullanılabilir.
* HTML Enjeksiyonu: marked.js'ten gelen HTML'in DOM'a nasıl eklendiğini
kontrol edin (örneğin, document.getElementById('content').innerHTML =
html;).
* Base URL/Tag: Bazı durumlarda, tarayıcıda göreceli yolların çözümlenmesi
için bir <base> etiketi kullanılabilir, ancak Electron uygulamalarında bu
nadirdir ve dikkatli kullanılmalıdır.
* Statik Dosya Sunumu: Eğer Electron uygulamanız, statik dosyaları (resimler
gibi) sunmak için dahili bir web sunucusu kullanıyorsa, bunun
yapılandırmasını kontrol edin. Ancak bu, doğrudan file:// erişimine göre
daha karmaşık bir yaklaşımdır.


Özetle, resimlerin görünmemesi durumunda ilk olarak göreceli yol çözümleme
mantığını (index.html'e göre mi, Markdown dosyasına göre mi çözülüyor) ve
Electron'un güvenlik ayarlarını (webSecurity) incelemeniz gerekir. En sağlam
çözüm, marked.js'in renderer'ını özelleştirerek göreceli yolları uygulamanın
kök dizinine göre mutlak yollara dönüştürmektir.