1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
|
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>nXhtml - an Emacs mode for Web Development</title>
<link href="wd/grapes/nxhtml-grapes.css" rel="StyleSheet" type="text/css" />
<style type="text/css">
#special {
background-color: red;
}
</style>
<style type="text/css">
#getit {
max-width: 800px;
}
#getit span { display: none; }
/* This seems to be impossible with CSS2 since the containing block
can not be floated. Why did they design it that way?
#getit, #getit dl { display: block; }
#getit a:hover span {
display: block;
position: absolute;
left: 200;
top: 0;
}
*/
#getit a {
/* Image */
display: block;
background: transparent url("img/getitbuttons.png") 0 0 no-repeat;
overflow: hidden;
width: 200px;
/* Text placement and size, etc */
text-align: center;
padding-top: 11px;
font-size: 12px;
font-weight: 600;
padding-bottom: 9px;
text-decoration: none;
white-space: nowrap;
border: none;
}
#getit dt {
display: block;
padding: 0;
margin: 0;
float: left;
letter-spacing: 0;
}
#getit a:hover {
background-position: 0 -35px;
color: yellow;
}
#useit {
position: absolute;
top: 150px;
left: 100px;
width: 85px;
z-index: 100;
border: none;
font-size: 9px;
}
/* I can't get rid of the underline. Firefox bug or my bug? */
#useit a { text-decoration: none; }
#useit img {
text-decoration: none;
overflow: hidden;
border: solid 2px #990033;
}
div#useit { text-decoration: none; }
#useit img:hover {
background: url("img/use-nXhtml-trans2.png") 0 0 no-repeat;
}
#quicklnk a {
color: #cd3700;
font-weight: bold;
font-size: 1.2em;
}
#quicklnk a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div id="useit">
<!-- title is for Firefox -->
<a href="http://ourcomments.org/Emacs/nXhtml/doc/nxhtml.html"
title="Get nXhtml for Emacs"
><img alt="Get nXhtml for Emacs" src="img/use-nXhtml-trans2.png" width="78" height="29" /></a>
Above is a little banner you can put on your site if you want to.
</div>
<div id="container">
<div id="hdr">
<br />
<span style="color:#FF0;font-size:14px; font-weight: 600;"> <i> Enjoying editing web files!</i> </span>
<br />
</div>
<div id="lftcol">
<!-- Table of contents BEGIN -->
<!-- Table of contents min=2 max=3 -->
<table id="PAGETOC"><tr><td>
<span class="tochead">On THIS Page:</span>
<ul>
<li><a href="#summary">Introduction to nXhtml</a></li>
<li class="liul"><ul>
<li><a href="#featsum">Features</a></li>
<li><a href="#qg">The Quick Guide</a></li>
<li><a href="#toolset">What you may use more</a></li>
</ul></li>
<li><a href="#completion">Completion</a></li>
<li class="liul"><ul>
<li><a href="#complex-compl">More Helpful Completion</a></li>
<li><a href="#ask-compl">But How Do I Ask nXhtml for Alternatives?</a></li>
<li><a href="#region-compl">The Region and Completion</a></li>
<li><a href="#errors">And if I Do Not Follow the Advices?</a></li>
</ul></li>
<li><a href="#xmlpath">Where am I? - XML Path</a></li>
<li><a href="#sites">Why it is Useful that nXhtml has Sites</a></li>
<li><a href="#mlinks">Why the Links Look Like Links</a></li>
<li><a href="#tocs">Did You Notice the Table of Contents at the Top?</a></li>
<li><a href="#tidy">But I Can't Use this Cause my Files are HTML</a></li>
<li><a href="#php">And what about Multiple Modes like PHP?</a></li>
<li class="liul"><ul>
<li><a href="#dtd-needed">But I Have no DTD Links in my PHP Files?</a></li>
<li><a href="#multi-colors">Why Are Colors Different in Multiple Modes?</a></li>
<li><a href="#part2">More Multiple Modes</a></li>
<li><a href="#tips-multi">Tips When Using Multiple Modes</a></li>
</ul></li>
<li><a href="#file-assoc">File Associations within Emacs</a></li>
<li><a href="#bloggin">Not for Me, I Am Only Blogging</a></li>
<li><a href="#bloggin">And Other Goodies...</a></li>
</ul>
</td></tr></table>
<!-- END of Table of contents -->
</div>
<div id="getit">
<dl>
<dt>
<a href="http://ourcomments.org/Emacs/nXhtml/tut/tutorials.html" title="Tutorials">Tutorials</a>
</dt>
<dt>
<a href="https://answers.launchpad.net/nxhtml/+faqs" title="nXhtml FAQ">nXhtml FAQ</a>
</dt>
<dt>
<a href="nxhtml-changes.html">News about nXhtml
<span>Details</span></a>
</dt>
<dt>
<a href="http://www.emacswiki.org/cgi-bin/wiki/NxhtmlMode"
>nXhtml page at EmacsWiki</a>
</dt>
<dt>
<a id="download" href="http://ourcomments.org/cgi-bin/emacsw32-dl-latest.pl">Download nXhtml</a>
</dt>
<dt>
<a href="https://launchpad.net/nxhtml" title="Bazaar repository">nXhtml at Launchpad</a>
</dt>
</dl>
</div>
<div id="rgtcol">
<h1 id="mainheader">nXhtml - Emacs Utilities for Web Development</h1>
<h2 id="summary">Introduction to nXhtml</h2>
<p>
nXhtml is an addon to Emacs for editing XHTML, PHP and similar things. It is not
very well-known, but it looks like at least <a
href="http://drewyates.net/nxml-nxhmtl-emacs-mode-for-ruby-on-rails-rhtml">Drew
Yates</a> has found it useful:
</p>
<blockquote>
<p style="font-style:italic">
nXML mode and the subsequent nXHTML mode for emacs are godsends ...
</p>
</blockquote>
<p>
And that was before I fixed all the bugs ...
</p>
<h3 id="featsum">Features</h3>
<p>
One of the main parts of nXhtml is nxhtml-mode, a GNU <a
href="http://en.wikipedia.org/wiki/Emacs">Emacs</a> major
mode that builds on <a
href="http://www.thaiopensource.com/nxml-mode/">nxml-mode</a>.
It knows about XHTML syntax and can check this as
you type. It can also tell you what tags and attributes you
can use at a certain point and help you insert them.
</p>
<p>
That feature, which we call <a
href="#completion">completion</a>, is one of the main
features of this mode. Another important feature is the
ability to mix several languages in one buffer and get the
correct syntax highlighting and indentation for each of
them.
</p>
<p>
In nXhtml this is combined with other features to make it
more easy to edit web sites (mostly XHTML based but there is
support for things like PHP too). Here is a list of important features:
</p>
<ul id="sum-ul">
<li>
Completion and syntax checking for XHTML.
<ul>
<li> Some helpful extensions when completing certain tags (like the <a ...> tag for example).</li>
<li> When region is visible tag completion will surround the region with the start tag and end tag.</li>
</ul>
</li>
<li>
Multiple major modes, which means it can handle for example PHP, JSP, eRuby and Django while allowing XHTML completion.
(Notice however that not all major modes you may need for this comes with nXhtml.)
</li>
<li>
Link handling:
<ul>
<li> Easier insertion of tags with links.</li>
<li> Following links to edit or view.</li>
<li> Moving between links.</li>
<li> Moving files and automatically update affected links.</li>
<li> Copy link to id location and paste it back as a relative link.</li>
<li> Link checking in current site (local links only)</li>
</ul>
</li>
<li>
The concept of a site. This is used in many places. A
site is here a directory tree with additional properties, like
remote ftp and http addresses. A directory could belong to
many sites.
</li>
<li>
Make a remote copy of site:
<ul>
<li> Uploading of single files</li>
<li> Uploading of whole or part of site</li>
<li> Editing of remote files.</li>
<li> Ediff of local vs remote file.</li>
<li> Easy viewing of local and remote files in web browser.</li>
</ul>
</li>
<li>
Table of contents
<ul>
<li>Creating table of contents for a page.</li>
<li>Creating table of contents for a site.</li>
<li>
Merging of pages and table of contents for a site (see
example, notice that the table of content easily can be
navigated using the keyboard).
</li>
</ul>
</li>
<li> Support for folding.</li>
<li> Using <a href="http://www.w3.org/People/Raggett/tidy/">Tidy</a> to convert HTML to XHTML.</li>
<li> Help for XHTML tags and CSS attributes.</li>
<li> Edit a fragment of an XHTML file (for blogging for example).</li>
<li> ... and more of course ...</li>
<!-- <li> Adding a popup menu to [apps] to access these features.</li> -->
</ul>
<h3 id="qg">The Quick Guide</h3>
<p>
Below are some short notes to get you started using nXhtml.
(Maybe you should start by taking a look at the
<a href="http://ourcomments.org/Emacs/nXhtml/tut/tutorials.html" title="Tutorials">Tutorials</a>?)
</p>
<dl>
<dt>GNU Emacs 22 or later</dt>
<dd>
<p>
You need GNU Emacs 22 (which was released 2007-06-02) or later.
</p>
</dd>
<dt>Installation</dt>
<dd>
<ul>
<li>
Download nXhtml as a zip file <a href="http://ourcomments.org/cgi-bin/emacsw32-dl-latest.pl">here</a>
or download
<a href="http://ourcomments.org/Emacs/EmacsW32.html">EmacsW32</a>.
</li>
<li>
If you got nXhtml with <a
href="http://ourcomments.org/Emacs/EmacsW32.html">EmacsW32</a>
you should use the menus <em>Options - Customize
EmacsW32</em> and there just set <em>nxhtml-load</em>.
</li>
<li>
If you downloaded the zip file with nXhtml then unzip it anywhere and
then follow the instructions in
<em>nxhtml/README.txt</em>.
</li>
</ul>
<p>
After this files with extensions for example .html will open in nxhtml-mode.
</p>
<p>
To make nXhtml run faster you can also byte compile the files.
You do that with <i>M-x nxhtmlmaint-start-byte-compilation</i>.
</p>
</dd>
<dt id="nxhtml-menu">The nXhtml Menu</dt>
<dd>
<p>
To reach many of the features in nXhtml you can use the
<b>nXhtml menu</b>. If you do not see that when in a buffer
then you can always do <em>M-x nxhtml-minor-mode</em> which
will turn it on (or off) for that buffer.
</p>
<p>
But please notice also the <b>XML menu</b> which
contains the nXml menu! (Remember that nXhtml is based
on nXml.) When you are using nxhtml-mode this menu is
visible when you are in the XHTML parts of a buffer.
</p>
</dd>
<!-- <dt id="turn-on-some">Turn on Some Things</dt> -->
<!-- <dd> -->
<!-- <p> -->
<!-- There is a good chance that you want to turn on some -->
<!-- things that makes nXhtml work more automatic. They are -->
<!-- in the <a href="#nxhtml-menu">nXhtml menu</a> for -->
<!-- turning them on temporarily. Later, when you have -->
<!-- tested, you may want to turn them on permanently, which -->
<!-- you can do from the menus by choosing <em>nXhtml - -->
<!-- nXhtml Help and Setup - Quick Customize nXhtml</em>. -->
<!-- </p> -->
<!-- </dd> -->
<dt>XHTML Completion and Validation</dt>
<dd>
<p>
nXhtml knows a good deal about XHTML tags and attributes when you are using <em>nxhtml-mode</em>.
It can assist you in different ways:
</p>
<ul>
<li>
Completion
</li>
<li>
Validation
</li>
</ul>
<p>
<b>Completion</b> means that you ask Emacs to give you choices to complete what you are currently writing.
For example you may have written <b and want to know what tags beginning this way can actually be used at that place in the document.
You ask Emacs in nxhtml-mode this by calling the function nxml-complete.
This is normally bound to M-Tab.
</p>
<p>
On some systems, for example MS Windows with an
unpatched Emacs this is inconvenient and clashes with
Alt-Tab that the window manager uses. There is however a
little utility that comes with nXhtml that let you use
just Tab for completion, <i>tabkey2-mode</i>. Turn this on with
</p>
<p style="padding-left:2em;">
M-x tabkey2-mode
</p>
<p>
After this the first Tab press will still do
indentation, but the second can do completion.
</p>
<p>
<b>Validation</b> means checking that what you have
written in nxhtml-mode follows the XHTML specifications.
If it does not there will be a red underline at the
places where something is wrong. To see what is wrong
move to this (for example with C-c C-n). A message in
the minibuffer will tell you the error.
</p>
<p>
Notice that the modeline also tells if the document is
valid. Most of the times it will however say
<em>Invalid</em> maybe just because you are editing and have
not yet finished.
</p>
<p>
For files mixing XHTML with codes, like PHP, you can use
something I call <a href="#dtd-needed">Fictive XHTML
Validation Headers</a>. That allows you to use XHTML
completion even if those files does not have the XHTML
headers needed.
</p>
</dd>
<dt>Multiple Major Modes</dt>
<dd>
<p>
nXhtml can automatically divide the buffer into chunks
with relevant different major modes (i e languages, like
PHP, XHTML etc). This is useful for editing PHP,
JSP, eRuby, Django and similar. See <a href="#php">And
what about Multiple Modes like PHP?</a> for more information.
</p>
</dd>
<dt>Links</dt>
<dd>
<p>
The links you put in your XHTML documents actually works
like links with nxhtml-mode too. To follow a link you
can use <em>C-c RET RET</em>. (There are other
possibilities too, they all begin with <em>C-c RET</em>.)
</p>
</dd>
<dt>Sites and Uploading</dt>
<dd>
<p>
If you want to upload your XHTML files, image files etc
you can do that from within Emacs. There are entries
for this in the <a href="#nxhtml-menu">nXhtml menu</a>.
</p>
</dd>
<dt>Keyboard shortcuts (aka keybindings in Emacs)</dt>
<dd>
<p>
When you start to use a new program you often wonder
about which keybindings there are to use. If you have
not used Emacs before you may feel quite lost because
you have looked in all documentation and you have not
seen any list of keybindings.
</p>
<p>
Well, that is how it often is in Emacs. Get use to it ...
</p>
<p>
But do not panic. Because there is help, probably even
better than you are used to - in Emacs dynamic help
system. A help system that change if you for example add
a keybinding yourself. Try the command <i>C-h b</i> (or <i>F1
b</i>). This list all the keybindings (in their priority
order) that are active where you are in Emacs.
</p>
<p>
You can also try <i>C-h m</i> which gives information about
minor modes and the current major mode. There is
sometimes information about the keybindings there too.
</p>
</dd>
<dt>Some More You Can Do ...</dt>
<dd>
<p>
See <a href="#summary">Introduction</a> above.
Look into the <a href="#nxhtml-menu">nXhtml menu</a>.
And then of course learn some of all the things you can do using the power of Emacs.
</p>
</dd>
</dl>
<p>
</p>
<h3 id="toolset">What you may use more</h3>
<p>
If find it very conventient to combine nXhtml with Firefox
add-on Firebug. I think Firebug is very handy for finding CSS
problem.
</p>
<p>
<a href="http://www.spreadfirefox.com/node&id=0&t=306"><img border="0"
alt="Firefox 3" title="Firefox 3"
src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox3/110x32_get_ffx.png"/></a>
<a href="http://www.getfirebug.com/?link=2" title="Firebug
is a free web development tool for
Firefox"><img src="http://www.getfirebug.com/images/firebug2.png"
border="0" alt="Firebug - Web Development Evolved"/></a>
</p>
<p>
And of course, another good resource is Russ Weakley's <a
href="http://css.maxdesign.com.au/">CSS-based tutorials</a>.
Russ co-chairs the <a
href="http://webstandardsgroup.org/">Web Standards Group</a>
and seems to know this well.
</p>
<p>
I am sure you know about it, but just in case, here is WDG's
<a href="http://htmlhelp.com/design/accessibility/">Guide to Accessibility</a>
and their
<a href="http://htmlhelp.com/design/accessibility/tips.html">Accessibility Tips</a>.
</p>
<h2 id="completion">Completion</h2>
<div align="right">
<img align="right"
src="img/popup-compl.png"
alt="Popup menu style completion"
title="Popup menu style completion"
style="border: thin dotted #00ff00;
margin-left: 2em;
margin-top: 0em;
margin-bottom: 1em;"
width="371" height="483" />
</div>
<p>
Completion in nXhtml Mode lets you ask Emacs <i>"What can I
type here?"</i>. The most important part, the content, can
Emacs not help you with yet. However when it comes to XHTML and
such things that you really want to get past as easy as
possible, then nXhtml mode can assist you.
</p>
<p>
Perhaps you wonder with <i>"With what?"</i> Well, completion
works like this: You position point in your XHML file where you
want to write. Now you ask nXhtml what XHTML code you can
write there. nXhtml may answer that it can't help you, that
happens in some cases.
</p>
<p>
But most often nXhtml can help you. It knows about tags and
where they fit, and it knows about tag attributes. When nXhtml
can helpt you it will give you choices you can select from. It
may display the choices in a popup menu like in the pictures to
the left, or it may use something like the picture below shows.
It is actually exactly the same question that is asked in these
two cases. You decide by <i>customizing</i> nXhtml mode in Emacs which
way it should display the choices. The way below is the
standard Emacs way to do display choices. It is fast once you know it, but
the popup menus are of course more familiar to computer users
today.
</p>
<img alt="Emacs style completion" src="img/emacs-style-completion.png" width="456" height="406"
/>
<p>
That far nXhtml can take you because it knows the DTD for XHTML.
(You may wonder about different versions of XHTML, more about that later.)
</p>
<h3 id="complex-compl">More Helpful Completion</h3>
<p>
For certain attributes nXhtml knows their values because the DTD just allows certain values.
For some other attribute values for which nXhtml can know little
from the DTD alone, like links (src and href attributes) nXhtml
can also be helpful. If you want a link to a file, for example,
nXhtml lets you browse for the file and then inserts a relative
link to it. It can also look for anchors (ie <b>id</b> attributes).
</p>
<p>
In some cases nXhtml knows more about a tag.
From the DTD it knows that an <b><img></b> tag should have a <b>src</b> attribute with a value that points to an image.
Therefor it prompts you for the value of the src attribute.
It is the same with the <b>alt</b> attribute that is required.
It even gets the height and width of an image on file if it can and inserts the attributes in the <img> tag.
</p>
<p>
Well, it is better that you test (and perhaps give some feedback?).
</p>
<p>
Normally nXhtml does not care that much. It just tells you that
you when you have broken the DTD rules. If however you want
nXhtml to do less or more of this kind then you can change the
variable <b>nxhtml-complete-tag-do-also</b> - but that requires
that you knows Emacs lisp. If you do write something useful for
this, please tell me.
</p>
<h3 id="ask-compl">But How Do I Ask nXhtml for Alternatives?</h3>
<p>
Oh, I nearly forgot. Do you wonder how to ask nXhtml in Emacs for completion alternatives?
That is a nice question to answer.
You give a certain command to Emacs to ask for this.
That can be done by either:
</p>
<ul>
<li>Type <i>M-Tab</i></li>
<li>Do it from the <a href="#nxhtml-menu">nXhtml menu</a>: <i>nXhtml - Completion - Complete tag, attributes etc</i></li>
<li>Or more explicit with a command: <i>M-x nxml-complete</i></li>
</ul>
<p>
You can change <i>M-Tab</i> to whatever you want. What it
means? Ah, yes, it means <i>"hold down the Meta key and press
Tab"</i>. That is Emacs jargon and you have to know which key
is the Meta key of course. I actually use the left Windows key
on my keyboard for Meta. See <a
href="http://ourcomments.org/Emacs/EmacsW32.html">EmacsW32 home
page</a> for some information about this if you are on MS
Windows.
</p>
<h3 id="region-compl">The Region and Completion</h3>
<p>
This is a small but useful thing (and I added it because some people liked it, it
was not my own idea): If some text is selected (in Emacs jargon
"if region is active and hilighted") and you use completion to
insert a tag then the <em>region will be surrounded by that tag</em>.
If region is active like here:
</p>
<img alt="Region is selected" src="img/region-selected.png" width="584" height="50"
style="border: thin dotted #00ff00;
vertical-align: top;
margin-bottom: 1em;" />
<p>
And you then ask for completion:
</p>
<img alt="Ask for tag" src="img/region-selected-completion.png" width="584" height="393"
style="border: thin dotted #00ff00;
vertical-align: top;
margin-bottom: 1em;" />
<p>
The result will be that your choice (<em>em</em> here) will surround the region you had selected:
</p>
<img alt="After completion" src="img/region-selected-after.png" width="584" height="61"
style="border: thin dotted #00ff00;
vertical-align: top;
margin-bottom: 1em;" />
<p>
Eh? Ah, yes, you are right. I happened to choose the wrong picture for the result. Sorry.
</p>
<h3 id="errors">And if I Do Not Follow the Advices?</h3>
<p>
nXhtml gives you advices about how to handle the XHTML tags, but
it does not force you to follow them. You can write whatever
you want, but nXhtml anyway observes what you are doing and
checks the XHTML code. If you do not follow the DTD rules
nXhtml will silently warn you with a red underline, like here
(where I have written <i>image</i> instead of <i>img</i>):
</p>
<img alt="Validation error marking" src="img/validation-error.png" width="375" height="50"
style="border: thin dotted #00ff00;"
/>
<p>
(Oh, geeh. Firefox took that before, but not now ...)
</p>
<h2 id="xmlpath" style="clear:both">Where am I? - XML Path</h2>
<p>
If you have for example <div> tags to separate things or long
list you may wonder in which of those you are. Nxml Mode can
show this. Look in the menus <i>XHTML - XML Path</i> to turn it
on. Here is what it looks like. There is header with the label <i>Path:</i> which here shows that we are in a list with id="sum-ul".
Note also the yellow color of the tag we are in. The whole path up to the top is colored this way.
</p>
<img alt="Showing XML Path" src="img/nxml-where.png" width="456" height="262" />
<p>
A little tip: I found this very useful when I looked at different CSS designs.
</p>
<h2 id="sites">Why it is Useful that nXhtml has Sites</h2>
<p>
I am writing this in nXhtml mode in Emacs. Just after I had
written a piece or added an image on my pc I update the web
pages on http://OurComments.org/. I do that very easily because
of the concept of a site.
</p>
<p>
A <b>site in nXhtml</b> is in its simplest form just a local directory tree.
And that is given a name.
In my case I have given it the name <i>nxhtml-doc</i> just to remember what it is about.
</p>
<p>
To that site I have also added information about uploading and
and the http address of the uploaded files. Now if I add an
image to the site on my pc all I have to do to upload it to the
web site is to open the image in Emacs (yes that is possible,
Emacs knows about the most common image formats) and then just from the menus choose
<i>Web Site - File Transfer - Upload Single File</i>.
That is all.
</p>
<p>
And then I can (from the XHTML file I am editing) use the
command <i>XHTML - File Transfer - View Uploaded File</i> to
check that the web page is ok.
</p>
<h2 id="mlinks">Why the Links Look Like Links</h2>
<p>
As soon as you open an XHTML file in nXhtml mode you will notice that the links you enter looks like links.
They are underlined and blue like in a web browser.
You may think that that is kind of nice, but why do they look like that?
</p>
<p>
It is just because they are links. You access them a little bit
different in a web browser, just so that it does not interfere
with editing. And because you may want to do different things
with them. Take a look at the picture below. I have positioned
point to a link and then pressed tha App key on my keyboard.
That pops up a menu where I can see what I can do with the link:
</p>
<img alt="Link with popup menu" src="img/links-appmenu.png" width="529" height="189"
style="border: thin dotted #00ff00;"
/>
<p>
As you can see I can copy the link (maybe not that useful
often). I can open it - and that means edit the linked file in
Emacs. That is useful. And then I can view the linked file in a
web browser. Can be useful too.
</p>
<p>
And then I can move between the links.
</p>
<p>
All this is useful, at least for me. But there are some more
things, in the menus <i>XHTML - Links</i>. Check them out, you
may like them. They may save you time.
</p>
<h2 id="tocs">Did You Notice the Table of Contents at the Top?</h2>
<p>
Well, you should notice not because it exactly is the worlds
most pretty table of content. But because it is there. And I
did not write it. nXhtml mode wrote it for me.
</p>
<p>
How it works? Just put <b>id</b> attributes on your header tags
(h1-h6). Then position point where you want the table of
contents. Tell nXhtml mode to write it by using the menus
<i>XHTML - Table of Contents</i>.
</p>
<p>
When you want to change it just ask nXhtml mode to rewrite it.
</p>
<p>
And you can make it more pretty if you are good at CSS.
</p>
<h2 id="tidy">But I Can't Use this Cause my Files are HTML</h2>
<p>
That is a problem of course. You need to convert them to XHTML
because that is what the browsers and all other tools are best
at today.
</p>
<p>
But don't worry. Didn't I tell you that nXhtml knows about <a
href="http://tidy.sourceforge.net/">Tidy For XHTML</a>? (It
even comes together with nXhtml if you get it with EmacsW32.)
</p>
<p>
Tidy can convert your HTML files to XHTML.
Just open a file in nXhtml mode then use the <i>Tidy</i>
menu and choose what you want to do there.
</p>
<p>
If you do it file-by-file you can compare the "tidied" XHTML
version of the file and your old version side by side (using
Emacs Ediff command actually - an interactive way to compare).
You can also tidy a whole directory tree at once.
</p>
<h2 id="php">And what about Multiple Modes like PHP?</h2>
<p>
nXhtml mode can handle multiple modes in a buffer. The
benefits of nXml style completion can still be used. This
can even be done when there is no header in the file that
tells what DTD to use for the completion.
</p>
<p>
Mumamo, which is part of nXhtml, implements what it
calls <i>multi major modes</i> for handling multiple major
modes in a buffer. Instead of turning on a major mode for a
buffer you turn on a multi major mode and Mumamo will handle
the rest. Multi major modes has names like nxhtml-mumamo,
html-mumamo, django-nxhtml-mumamo etc.
</p>
<p>
When point is in a PHP part then the major mode is switched
to php-mode, with all that means. Here you can see how that
looks:
</p>
<img alt="In PHP part" src="img/php-in-nxhtml.png" width="448" height="294" />
<p>
If you move the point outside of those <?php ... ?> areas
then the mode is automatically switched to nxhtml-mode
instead. Now you can use the power of nxhtml-mode and
do for example completion, like here:
</p>
<img alt="In XHTML part" src="img/php-in-nxhtml-2.png" width="450" height="294" />
<p>
The switching is done with a short delay so that it does not
interfere with your normal editing. That's it. (But maybe
there should be a better php-mode? Does someone has any
better than the one that comes with nXhtml now?)
</p>
<h3 id="dtd-needed">But I Have no DTD Links in my PHP Files?</h3>
<p>
Ah, yes. Good question. You are right. nXhtml mode needs a
DTD to be able to help you with XHTML and completion. I
thought it was impossible for a normal human to get that
working.
</p>
<p>
But it turned out to be surpricingly simple and it works
quite nicely now. The first time you do completion of XHTML
code in a buffer where you do not have the needed XHTML
headers nXhtml mode will ask you for what it calls a
<em>fictive XHTML validation header</em>. After that completion
should work as usual. A fictive XHTML validation header in nXhtml
mode is something that is used in the background for
validation. It is not inserted in the buffer, but may be shown on the screen like this:
</p>
<img alt="fictive XHTML validation header" src="img/xml-validation-header.png" width="448" height="374" />
<p>
nXhtml does its best to guess what fictive XHTML Validation Header
the buffer needs, but if the default fictive XHTML validation header
does not fit you can customize the choices.
</p>
<p>
Note: Do not try to set the XML schema directly when the XHTML
headers are missing in the buffer. Use a fictive XHTML
validation header instead.
</p>
<h3 id="multi-colors">Why Are Colors Different in Multiple Modes?</h3>
<p>
It has been necessary to replace the nxml-mode style
fontification with the sgml-mode style. All other features
of nXml/nXhtml modes should still work however.
In all other cases the normal fontification colors are used.
</p>
<p>
Or perhaps you mean the background colors? These are just a
visual aid about the dividing into chunks with different
major modes and they can be turned off. Do <em>M-x
customize-group RET mumamo RET</em>.
</p>
<h3 id="part2">More Multiple Modes</h3>
<p>
nXhtml mode handles for example embedded style sheets the
same way as it handles PHP chunks:
</p>
<!--
<img alt="CSS embedded in XHTML" src="img/embedded-xhtml.png" width="448" height="294" />
-->
<img alt="CSS embedded in XHTML" src="img/style-in-nxhtml.png" width="448" height="278" />
<p>
Currently it can handle PHP, CSS, JavaScript, eRuby, JSP and
some other minor cases. If you can program in elisp it is
not a very big deal adding support for other embedded
languages. (I do not use all the languages above myself so
please give me feedback if there is something you think
could be done better.)
</p>
<p>
Please notice also that each major mode handles completion
in its own ways. The popup style completion is currently
only used by nXhtml mode, not the other major modes even if
they are on the same page.
</p>
<p>
The use of multi major modes is not constrained to nXhtml.
You can use that when editing other files too. To see what
multi major modes are currently defined in your Emacs
session see the
variable <i>mumamo-defined-turn-on-functions</i>.
</p>
<h3 id="tips-multi">Tips When Using Multiple Modes</h3>
<p>
The routines dividing into chunks with different major modes is not that very supersmart.
They do not know much about the languages of the major modes.
So if you write something like this:
</p>
<pre>
<?php
echo '<'?xml version="1.0" encoding="utf-8"?'>';
?>
</pre>
<p>
it will get very, very confused. If you are not fond of that
you better write it like this instead:
</p>
<pre>
<?php
echo '<'; echo '?xml version="1.0" encoding="utf-8"?'; echo '>';
?>
</pre>
<p>
For a similar problem <a href="nxhtml-changes.html#php-attribute-values">attribute values computed by PHP</a>.
</p>
<p>
When editing PHP sometimes the validation of the XHTML part
gets quite upset. You may even think that it is unuseful
(since trying to complete gives you nothing), but it is not.
Here is what you can do:
</p>
<ul>
<li>
Turn on <em>Fictive XHTML Validation Header</em> from
menus. (In <em>nXhtml - Completion</em>.) That will try
to guess a how to start validation. It shows a fictive
header at the top of the buffer to show you what is goind
on (nothing is inserted in the buffer).
</li>
<li>
If you do not think the red underlines you get are very
pretty then you can hide them. Use the menus again,
<em>Hide Validation Errors</em>.
</li>
</ul>
<p>
And maybe you do not think the background colors when using
Multiple Major Modes is very smart? Then just go ahead and
remove them. Customize.
<em>M-x customize-group RET mumamo RET</em>.
</p>
<h2 id="file-assoc">File Associations within Emacs</h2>
<p>
Some file associations are changed within Emacs to get
multiple modes to work without requiring the user to do
anything. Good for a new user I guess, but I understand
that old Emacs users may want more control over this. If
you are one of them then please look in
<em>nxhtml-autoload.el</em> which is where the associations
are made.
</p>
<h2 id="bloggin">Not for Me, I Am Only Blogging</h2>
<p>
Not for you?
Ah, wait a minute.
Blogging, that is exactly one of the things that I myself use this for.
</p>
<p>
When you blog you only write part of an XHTML page, so you
may think that all the nicities of nXhtml mode like
validation and completion does not work. They do. (If you
wonder how, then please read <a href="#dtd-needed">But I
Have No DTD Links In My PHP Files</a>. Though you do not
have to read this to start using nXhtml for writing blog
texts and comments.)
</p>
<p>
The setup for blogging is simple
</p>
<ol>
<li>
<a href="http://www.mozilla.com/en-US/firefox/">Firefox</a> - which you of course already use ...
</li>
<li>
The <a href="https://addons.mozilla.org/en-US/firefox/addon/4125">It's All Text</a> add-on to Firefox.
It should use Emacs client:
<p>
<img alt="It's All Text preferences" src="img/itsalltext-pref.png" width="371" height="352" />
</p>
</li>
<li>
And finally: Customize the little elisp library that comes with nXhtml:
<p style="padding-left:2em; font-size: 1em; font-weight: 600;">
M-x customize-group RET as-external RET
</p>
You just need to turn <i>as-external</i> on there.
</li>
</ol>
<p>
With this setup you just press F2 in any text area in
Firefox and then you got the text to edit in Emacs - using
nXhtml for completion etc. Finish and save with <b>C-x
#</b>.
</p>
<!-- <img alt="Edit part of an XHTML file" src="img/edit-part.png" width="448" height="390" /> -->
<h2 id="bloggin">And Other Goodies...</h2>
<p>
There are a lot of other things in the package too, please
see the nXhtml menu in Emacs. You can for example find a
n-back-game (if you do not know what it is now, do not
worry, just try it and you will learn - and understand why I
put it there).
</p>
</div>
<hr align="left" class="footer" />
<p class="footer">
Copyright © 2008 OurComments.org
<br style="margin:0; padding:0; line-height: 0;" />
Design thanks to <a href="http://www.oswd.org/">OSWD</a>
<br />
</p>
</div>
</body>
</html>
|
